From 9dad0e2ae67f5b863563a87e66c4e965525315d0 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Thu, 27 Feb 2025 17:20:34 +0100
Subject: [PATCH 001/123] wip

---
 docker/configs/otel-collector/Dockerfile      |   31 +
 .../otel-collector/builder-config.yaml        |   26 +
 docker/configs/otel-collector/config.yaml     |   65 +
 docker/docker-compose.dev.yml                 |   17 +
 docker/docker.hcl                             |   30 +
 docker/otel-collector.dockerfile              |   27 +
 packages/services/server/src/index.ts         |    3 +
 .../services/server/src/otel-auth-endpoint.ts |   28 +
 packages/web/app/package.json                 |    4 +
 packages/web/app/src/components/ui/chart.tsx  |  328 +++
 .../web/app/src/components/ui/resizable.tsx   |   39 +
 packages/web/app/src/components/ui/sheet.tsx  |    8 +-
 .../web/app/src/components/ui/sidebar.tsx     |  732 ++++++
 packages/web/app/src/index.css                |   30 +
 .../src/pages/target-insights-new-filter.tsx  |  513 ++++
 .../src/pages/target-insights-new-trace.tsx   |  649 +++++
 .../src/pages/target-insights-new-width.tsx   |   58 +
 .../web/app/src/pages/target-insights-new.tsx | 2181 +++++++++++++++++
 packages/web/app/src/router.tsx               |   34 +
 packages/web/app/tailwind.config.ts           |   10 +
 pnpm-lock.yaml                                |  237 +-
 tracing/notes.md                              |   14 +
 tracing/signoz.md                             |   39 +
 tracing/uptrace.md                            |   17 +
 24 files changed, 5084 insertions(+), 36 deletions(-)
 create mode 100644 docker/configs/otel-collector/Dockerfile
 create mode 100644 docker/configs/otel-collector/builder-config.yaml
 create mode 100644 docker/configs/otel-collector/config.yaml
 create mode 100644 docker/otel-collector.dockerfile
 create mode 100644 packages/services/server/src/otel-auth-endpoint.ts
 create mode 100644 packages/web/app/src/components/ui/chart.tsx
 create mode 100644 packages/web/app/src/components/ui/resizable.tsx
 create mode 100644 packages/web/app/src/components/ui/sidebar.tsx
 create mode 100644 packages/web/app/src/pages/target-insights-new-filter.tsx
 create mode 100644 packages/web/app/src/pages/target-insights-new-trace.tsx
 create mode 100644 packages/web/app/src/pages/target-insights-new-width.tsx
 create mode 100644 packages/web/app/src/pages/target-insights-new.tsx
 create mode 100644 tracing/notes.md
 create mode 100644 tracing/signoz.md
 create mode 100644 tracing/uptrace.md

diff --git a/docker/configs/otel-collector/Dockerfile b/docker/configs/otel-collector/Dockerfile
new file mode 100644
index 0000000000..5df59e115e
--- /dev/null
+++ b/docker/configs/otel-collector/Dockerfile
@@ -0,0 +1,31 @@
+FROM scratch AS config
+
+COPY builder-config.yaml .
+
+FROM golang:1.23.7-bookworm AS builder
+
+ARG OTEL_VERSION=0.122.0
+
+WORKDIR /build
+
+RUN go install go.opentelemetry.io/collector/cmd/builder@v${OTEL_VERSION}
+
+# Copy the manifest file and other necessary files
+COPY --from=config builder-config.yaml .
+
+# Build the custom collector
+RUN CGO_ENABLED=0 builder --config=/build/builder-config.yaml
+
+# Stage 2: Final Image
+FROM alpine:3.14
+
+WORKDIR /app
+
+# Copy the generated collector binary from the builder stage
+COPY --from=builder /build/otelcol-custom .
+
+# Expose necessary ports
+EXPOSE 4317/tcp 4318/tcp 13133/tcp
+
+# Set the default command
+CMD ["./otelcol-custom", "--config=/etc/otel-config.yaml"]
diff --git a/docker/configs/otel-collector/builder-config.yaml b/docker/configs/otel-collector/builder-config.yaml
new file mode 100644
index 0000000000..8242a77fee
--- /dev/null
+++ b/docker/configs/otel-collector/builder-config.yaml
@@ -0,0 +1,26 @@
+dist:
+  version: 0.122.0
+  name: otelcol-custom
+  description: Custom OTel Collector distribution
+  output_path: ./otelcol-custom
+
+receivers:
+  - gomod: go.opentelemetry.io/collector/receiver/otlpreceiver v0.122.0
+
+processors:
+  - gomod: go.opentelemetry.io/collector/processor/batchprocessor v0.122.0
+  - gomod:
+      github.com/open-telemetry/opentelemetry-collector-contrib/processor/attributesprocessor
+      v0.122.0
+
+exporters:
+  - gomod: go.opentelemetry.io/collector/exporter/debugexporter v0.122.0
+  - gomod:
+      github.com/open-telemetry/opentelemetry-collector-contrib/exporter/clickhouseexporter v0.122.0
+
+extensions:
+  - gomod:
+      github.com/open-telemetry/opentelemetry-collector-contrib/extension/healthcheckextension
+      v0.122.0
+  - gomod:
+      github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension cd0c57cf22
diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
new file mode 100644
index 0000000000..3804d72036
--- /dev/null
+++ b/docker/configs/otel-collector/config.yaml
@@ -0,0 +1,65 @@
+extensions:
+  hiveauth:
+    endpoint: ${HIVE_OTEL_AUTH_ENDPOINT}
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        include_metadata: true
+        endpoint: '0.0.0.0:4317'
+        auth:
+          authenticator: hiveauth
+      http:
+        cors:
+          allowed_origins: ['*']
+          allowed_headers: ['*']
+        include_metadata: true
+        endpoint: '0.0.0.0:4318'
+        auth:
+          authenticator: hiveauth
+processors:
+  batch:
+    timeout: 5s
+    send_batch_size: 100000
+  attributes:
+    actions:
+      - key: hive.target_id
+        from_context: auth.targetId
+        action: insert
+exporters:
+  # debug:
+  #   verbosity: detailed
+  #   sampling_initial: 5
+  #   sampling_thereafter: 200
+  clickhouse:
+    endpoint: tcp://clickhouse:9000?dial_timeout=10s&compress=lz4
+    database: default
+    async_insert: true
+    username: test
+    password: test
+    create_schema: true
+    ttl: 720h
+    compress: lz4
+    logs_table_name: otel_logs
+    traces_table_name: otel_traces
+    metrics_table_name: otel_metrics
+    timeout: 5s
+    retry_on_failure:
+      enabled: true
+      initial_interval: 5s
+      max_interval: 30s
+      max_elapsed_time: 300s
+service:
+  extensions:
+    - hiveauth
+  telemetry:
+    logs:
+      level: INFO
+      encoding: json
+      output_paths: ['stdout']
+      error_output_paths: ['stderr']
+  pipelines:
+    traces:
+      receivers: [otlp]
+      processors: [attributes, batch]
+      exporters: [clickhouse]
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index a76deecc29..fbacfcc4ff 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -16,6 +16,7 @@ services:
       POSTGRES_PASSWORD: postgres
       POSTGRES_DB: registry
       PGDATA: /var/lib/postgresql/data
+      HIVE_OTEL_AUTH_ENDPOINT: 'http://host.docker.internal:3001/otel-auth'
     volumes:
       - ./.hive-dev/postgresql/db:/var/lib/postgresql/data
     ports:
@@ -176,5 +177,21 @@ services:
     networks:
       - 'stack'
 
+  otel-collector:
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+    build:
+      context: ./configs/otel-collector
+      dockerfile: Dockerfile
+    volumes:
+      - ./configs/otel-collector/builder-config.yaml:/builder-config.yaml
+      - ./configs/otel-collector/config.yaml:/etc/otel-config.yaml
+    ports:
+      - '4317:4317'
+      - '4318:4318'
+    networks:
+      - 'stack'
+
 networks:
   stack: {}
diff --git a/docker/docker.hcl b/docker/docker.hcl
index 0910aadbdc..4e9e421965 100644
--- a/docker/docker.hcl
+++ b/docker/docker.hcl
@@ -82,6 +82,13 @@ target "router-base" {
   }
 }
 
+target "otel-collector-base" {
+  dockerfile = "${PWD}/docker/otel-collector.dockerfile"
+  args = {
+    RELEASE = "${RELEASE}"
+  }
+}
+
 target "cli-base" {
   dockerfile = "${PWD}/docker/cli.dockerfile"
   args = {
@@ -370,6 +377,23 @@ target "apollo-router" {
   ]
 }
 
+target "otel-collector" {
+  inherits = ["otel-collector-base", get_target()]
+  contexts = {
+    config = "${PWD}/docker/configs/otel-collector"
+  }
+  args = {
+    IMAGE_TITLE = "graphql-hive/otel-collector"
+    IMAGE_DESCRIPTION = "OTEL Collector for GraphQL Hive."
+  }
+  tags = [
+    local_image_tag("otel-collector"),
+    stable_image_tag("otel-collector"),
+    image_tag("otel-collector", COMMIT_SHA),
+    image_tag("otel-collector", BRANCH_NAME)
+  ]
+}
+
 target "cli" {
   inherits = ["cli-base", get_target()]
   context = "${PWD}/packages/libraries/cli"
@@ -426,6 +450,12 @@ group "apollo-router-hive-build" {
   ]
 }
 
+group "otel-collector-hive-build" {
+  targets = [
+    "otel-collector"
+  ]
+}
+
 group "cli" {
   targets = [
     "cli"
diff --git a/docker/otel-collector.dockerfile b/docker/otel-collector.dockerfile
new file mode 100644
index 0000000000..6bbe6b48bd
--- /dev/null
+++ b/docker/otel-collector.dockerfile
@@ -0,0 +1,27 @@
+FROM golang:1.23.7-bookworm AS builder
+
+ARG OTEL_VERSION=0.122.0
+
+WORKDIR /build
+
+RUN go install go.opentelemetry.io/collector/cmd/builder@v${OTEL_VERSION}
+
+# Copy the manifest file and other necessary files
+COPY --from=config builder-config.yaml .
+
+# Build the custom collector
+RUN builder --config=/build/builder-config.yaml
+
+# Stage 2: Final Image
+FROM alpine:3.14
+
+WORKDIR /app
+
+# Copy the generated collector binary from the builder stage
+COPY --from=builder /build/otelcol-custom .
+
+# Expose necessary ports
+EXPOSE 4317/tcp 4318/tcp 13133/tcp
+
+# Set the default command
+CMD ["./otelcol-custom", "--config=/etc/otel-config.yaml"]
diff --git a/packages/services/server/src/index.ts b/packages/services/server/src/index.ts
index 51716090ab..f9efcdca60 100644
--- a/packages/services/server/src/index.ts
+++ b/packages/services/server/src/index.ts
@@ -66,6 +66,7 @@ import { env } from './environment';
 import { graphqlHandler } from './graphql-handler';
 import { clickHouseElapsedDuration, clickHouseReadDuration } from './metrics';
 import { createPublicGraphQLHandler } from './public-graphql-handler';
+import { createOtelAuthEndpoint } from './otel-auth-endpoint';
 import { initSupertokens, oidcIdLookup } from './supertokens';
 
 export async function main() {
@@ -592,6 +593,8 @@ export async function main() {
       return;
     });
 
+    createOtelAuthEndpoint(server);
+
     if (env.cdn.providers.api !== null) {
       const s3 = {
         client: new AwsClient({
diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
new file mode 100644
index 0000000000..ed477ade11
--- /dev/null
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -0,0 +1,28 @@
+import type { FastifyInstance } from 'fastify';
+
+export function createOtelAuthEndpoint(server: FastifyInstance) {
+  server.get('/otel-auth', (req, res) => {
+    const authHeader = req.headers.authorization;
+    const targetRefHeader = req.headers['x-hive-target-ref'];
+    req.log.info('request! ' + authHeader);
+
+    if (authHeader === 'Bearer 123') {
+      if (targetRefHeader !== 'target-1') {
+        // No access to target-1
+        res.status(403).send({
+          message: 'Forbidden access to the target',
+        });
+        return;
+      }
+
+      res.status(200).send({
+        message: 'Authenticated',
+        targetId: targetRefHeader,
+      });
+    } else {
+      res.status(401).send({
+        message: 'Unauthorized',
+      });
+    }
+  });
+}
diff --git a/packages/web/app/package.json b/packages/web/app/package.json
index 94985cb798..2152884d72 100644
--- a/packages/web/app/package.json
+++ b/packages/web/app/package.json
@@ -81,12 +81,14 @@
     "@urql/exchange-auth": "2.2.0",
     "@urql/exchange-graphcache": "7.1.0",
     "@vitejs/plugin-react": "4.3.4",
+    "@xyflow/react": "12.4.4",
     "autoprefixer": "10.4.21",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "0.2.1",
     "crypto-js": "^4.2.0",
     "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "dompurify": "3.2.6",
     "dotenv": "16.4.7",
     "echarts": "5.6.0",
@@ -112,6 +114,7 @@
     "react-highlight-words": "0.20.0",
     "react-hook-form": "7.54.2",
     "react-icons": "5.4.0",
+    "react-resizable-panels": "2.1.7",
     "react-select": "5.9.0",
     "react-string-replace": "1.1.1",
     "react-textarea-autosize": "8.5.9",
@@ -119,6 +122,7 @@
     "react-virtualized-auto-sizer": "1.0.25",
     "react-virtuoso": "4.12.3",
     "react-window": "1.8.11",
+    "recharts": "2.15.1",
     "regenerator-runtime": "0.14.1",
     "snarkdown": "2.0.0",
     "storybook": "8.4.7",
diff --git a/packages/web/app/src/components/ui/chart.tsx b/packages/web/app/src/components/ui/chart.tsx
new file mode 100644
index 0000000000..e11d102365
--- /dev/null
+++ b/packages/web/app/src/components/ui/chart.tsx
@@ -0,0 +1,328 @@
+'use client';
+
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+import { cn } from '@/lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<'div'> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: 'line' | 'dot' | 'dashed';
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = 'dot',
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || 'value'}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === 'string'
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || 'value'}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  indicator === 'dot' && 'items-center',
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            'shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]',
+                            {
+                              'h-2.5 w-2.5': indicator === 'dot',
+                              'w-1': indicator === 'line',
+                              'w-0 border-[1.5px] border-dashed bg-transparent':
+                                indicator === 'dashed',
+                              'my-0.5': nestLabel && indicator === 'dashed',
+                            },
+                          )}
+                          style={
+                            {
+                              '--color-bg': indicatorColor,
+                              '--color-border': indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        'flex flex-1 justify-between leading-none',
+                        nestLabel ? 'items-end' : 'items-center',
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="text-foreground font-mono font-medium tabular-nums">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map(item => {
+        const key = `${nameKey || item.dataKey || 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = 'ChartLegend';
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== 'object' || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/packages/web/app/src/components/ui/resizable.tsx b/packages/web/app/src/components/ui/resizable.tsx
new file mode 100644
index 0000000000..859532c626
--- /dev/null
+++ b/packages/web/app/src/components/ui/resizable.tsx
@@ -0,0 +1,39 @@
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from '@/lib/utils';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/packages/web/app/src/components/ui/sheet.tsx b/packages/web/app/src/components/ui/sheet.tsx
index 465be4d20f..a82e682c2b 100644
--- a/packages/web/app/src/components/ui/sheet.tsx
+++ b/packages/web/app/src/components/ui/sheet.tsx
@@ -49,14 +49,16 @@ const sheetVariants = cva(
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+    VariantProps<typeof sheetVariants> {
+  noOverlay?: boolean;
+}
 
 const SheetContent = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Content>,
   SheetContentProps
->(({ side = 'right', className, children, ...props }, ref) => (
+>(({ side = 'right', className, children, noOverlay, ...props }, ref) => (
   <SheetPortal>
-    <SheetOverlay />
+    {noOverlay ? null : <SheetOverlay />}
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
       <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
diff --git a/packages/web/app/src/components/ui/sidebar.tsx b/packages/web/app/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000000..61ff277ffe
--- /dev/null
+++ b/packages/web/app/src/components/ui/sidebar.tsx
@@ -0,0 +1,732 @@
+import * as React from 'react';
+import { cva, VariantProps } from 'class-variance-authority';
+import { PanelLeft } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Separator } from '@/components/ui/separator';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { Slot } from '@radix-ui/react-slot';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContext = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const isMobile = false;
+    const [openMobile, setOpenMobile] = React.useState(false);
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        const openState = typeof value === 'function' ? value(open) : value;
+        if (setOpenProp) {
+          setOpenProp(openState);
+        } else {
+          _setOpen(openState);
+        }
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      },
+      [setOpenProp, open],
+    );
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
+    }, [isMobile, setOpen, setOpenMobile]);
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+          event.preventDefault();
+          toggleSidebar();
+        }
+      };
+
+      window.addEventListener('keydown', handleKeyDown);
+      return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed';
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+    );
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+              className,
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    );
+  },
+);
+SidebarProvider.displayName = 'SidebarProvider';
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+  }
+>(
+  (
+    {
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+    if (collapsible === 'none') {
+      return (
+        <div
+          className={cn(
+            'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+            className,
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      );
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="text-sidebar-foreground group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+            'group-data-[collapsible=offcanvas]:w-0',
+            'group-data-[side=right]:rotate-180',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
+          )}
+        />
+        <div
+          className={cn(
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+            side === 'left'
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            // Adjust the padding for floating and inset variants.
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className,
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('h-7 w-7', className)}
+      onClick={event => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+          'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarRail.displayName = 'SidebarRail';
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <main
+        ref={ref}
+        className={cn(
+          'bg-background relative flex min-h-svh flex-1 flex-col',
+          'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarInset.displayName = 'SidebarInset';
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="header"
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="footer"
+        className={cn('flex flex-col gap-2 p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  );
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="content"
+        className={cn(
+          'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-sidebar="group"
+        className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  ),
+);
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  ),
+);
+SidebarMenu.displayName = 'SidebarMenu';
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  ),
+);
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = 'default',
+      size = 'default',
+      tooltip,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'button';
+    const { isMobile, state } = useSidebar();
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+
+    if (!tooltip) {
+      return button;
+    }
+
+    if (typeof tooltip === 'string') {
+      tooltip = {
+        children: tooltip,
+      };
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== 'collapsed' || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    );
+  },
+);
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
+  ({ ...props }, ref) => <li ref={ref} {...props} />,
+);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/packages/web/app/src/index.css b/packages/web/app/src/index.css
index 48fdc54309..b3e68107c1 100644
--- a/packages/web/app/src/index.css
+++ b/packages/web/app/src/index.css
@@ -40,6 +40,21 @@
     --header-height: 84px;
     --tabs-navbar-height: 47px;
     --content-height: calc(100vh - var(--header-height) - var(--tabs-navbar-height));
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --chart-1: 173 58% 39%;
+    --chart-2: 12 76% 61%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
@@ -76,6 +91,21 @@
     --ring: 216 34% 17%;
 
     --radius: 0.5rem;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    --chart-1: 220 70% 50%;
+    --chart-5: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-2: 340 75% 55%;
   }
 }
 
diff --git a/packages/web/app/src/pages/target-insights-new-filter.tsx b/packages/web/app/src/pages/target-insights-new-filter.tsx
new file mode 100644
index 0000000000..7912c03c0c
--- /dev/null
+++ b/packages/web/app/src/pages/target-insights-new-filter.tsx
@@ -0,0 +1,513 @@
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  Fragment,
+  InputHTMLAttributes,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { addDays, formatDate } from 'date-fns';
+import {
+  CalendarIcon,
+  CheckIcon,
+  ChevronRight,
+  ChevronRightIcon,
+  CircleXIcon,
+  MinusIcon,
+  PlusIcon,
+} from 'lucide-react';
+import type { DateRange } from 'react-day-picker';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarSeparator,
+} from '@/components/ui/sidebar';
+import { formatNumber } from '@/lib/hooks';
+import { cn } from '@/lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+
+interface FilterInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export function FilterLocalSearch(props: { value: string; onChange(value: string): void }) {
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    props.onChange(e.target.value);
+  }, []);
+
+  return (
+    <div className="mt-4 flex w-full max-w-sm items-center space-x-2">
+      <FilterInput
+        type="text"
+        placeholder="Search values"
+        value={props.value}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+export function FilterTitle(props: { children: ReactNode; changes?: number; onReset(): void }) {
+  return (
+    <SidebarGroupLabel
+      asChild
+      className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+    >
+      <CollapsibleTrigger>
+        <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+        {props.children}
+        {props.changes ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
+            onClick={e => {
+              e.preventDefault();
+              props.onReset();
+            }}
+          >
+            <CircleXIcon className="hidden size-3 group-hover:block" />
+            <span className="block group-hover:hidden">{props.changes}</span>
+          </Button>
+        ) : null}
+      </CollapsibleTrigger>
+    </SidebarGroupLabel>
+  );
+}
+
+export function FilterContent(props: { children: ReactNode }) {
+  return (
+    <CollapsibleContent>
+      <SidebarGroupContent>
+        <SidebarMenu>{props.children}</SidebarMenu>
+      </SidebarGroupContent>
+    </CollapsibleContent>
+  );
+}
+
+export function MultiInputFilter(props: {
+  name: string;
+  /**
+   * Filter's key for the backend and url state
+   */
+  key: string;
+  selectedValues: string[];
+  onChange(selectedValues: string[]): void;
+}) {
+  const [traceId, setTraceId] = useState('');
+  const handleTraceIdChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setTraceId(e.target.value);
+    },
+    [setTraceId],
+  );
+
+  const addTraceId = useCallback(() => {
+    if (!traceId) {
+      return;
+    }
+
+    if (!props.selectedValues.includes(traceId)) {
+      props.onChange(props.selectedValues.concat(traceId));
+    }
+
+    setTraceId('');
+  }, [traceId, setTraceId]);
+
+  return (
+    <Filter name={props.name}>
+      <FilterTitle
+        changes={props.selectedValues.length}
+        children={props.name}
+        onReset={() => props.onChange([])}
+      />
+      <FilterContent>
+        <form
+          className="mt-4 flex w-full max-w-sm items-center space-x-2"
+          onSubmit={e => {
+            e.preventDefault();
+            addTraceId();
+          }}
+        >
+          <FilterInput
+            type="text"
+            placeholder="Trace ID..."
+            value={traceId}
+            onChange={handleTraceIdChange}
+          />
+          <Button
+            variant="secondary"
+            className="h-9 w-9 p-0"
+            type="submit"
+            onClick={() => {
+              addTraceId();
+            }}
+          >
+            <PlusIcon className="size-4" />
+          </Button>
+        </form>
+        {props.selectedValues.map(value => (
+          <SidebarMenuButton
+            key={value}
+            onClick={() => props.onChange(props.selectedValues.filter(val => val !== value))}
+            className="group/trace-id hover:bg-sidebar-accent/50"
+          >
+            <div
+              data-active
+              className="text-sidebar-primary-foreground border-sidebar-primary bg-sidebar-primary group-hover/trace-id:border-sidebar-border flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border group-hover/trace-id:bg-transparent"
+            >
+              <CheckIcon className="block size-3 group-hover/trace-id:hidden" />
+              <MinusIcon className="hidden size-3 group-hover/trace-id:block" />
+            </div>
+            {value}
+          </SidebarMenuButton>
+        ))}
+      </FilterContent>
+    </Filter>
+  );
+}
+
+export function MultiSelectFilter<$Value>(props: {
+  name: string;
+  /**
+   * Filter's key for the backend and url state
+   */
+  key: string;
+  hideSearch?: boolean;
+  options: Array<{
+    /**
+     * How often it occurs
+     */
+    count: number;
+    /**
+     * What to display
+     */
+    label: ReactNode;
+    /**
+     * What to use when searching
+     */
+    searchContent: string;
+    /**
+     * A value to use when the filter is selected
+     */
+    value: $Value;
+  }>;
+  selectedValues: $Value[];
+  onChange(selectedValues: $Value[]): void;
+}) {
+  const [searchPhrase, setSearchPhrase] = useState('');
+  const filteredOptions = useMemo(() => {
+    const lowerSearchPhrase = searchPhrase.toLowerCase().trim();
+
+    if (!lowerSearchPhrase) {
+      return props.options;
+    }
+
+    return props.options.filter(option =>
+      option.searchContent.toLowerCase().includes(lowerSearchPhrase),
+    );
+  }, [searchPhrase]);
+
+  return (
+    <Filter name={props.name}>
+      <FilterTitle
+        changes={props.selectedValues.length}
+        children={props.name}
+        onReset={() => props.onChange([])}
+      />
+      <FilterContent>
+        {!props.hideSearch && <FilterLocalSearch value={searchPhrase} onChange={setSearchPhrase} />}
+        {filteredOptions.map((option, index) => (
+          <FilterOption
+            key={index}
+            selected={props.selectedValues.includes(option.value)}
+            count={option.count}
+            onClick={() => {
+              if (props.selectedValues.includes(option.value)) {
+                props.onChange(props.selectedValues.filter(val => val !== option.value));
+              } else {
+                props.onChange(props.selectedValues.concat(option.value));
+              }
+            }}
+          >
+            {option.label}
+          </FilterOption>
+        ))}
+      </FilterContent>
+    </Filter>
+  );
+}
+
+function FilterOption(props: {
+  onClick(): void;
+  selected: boolean;
+  children: ReactNode;
+  count?: number;
+}) {
+  return (
+    <SidebarMenuButton
+      onClick={props.onClick}
+      className="hover:bg-sidebar-accent/50 flex-row items-center justify-between"
+    >
+      <div className="flex items-center gap-2 overflow-hidden">
+        <div
+          data-active={props.selected}
+          className="group/filter-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+        >
+          <CheckIcon className="hidden size-3 group-data-[active=true]/filter-item:block" />
+        </div>
+        {props.children}
+      </div>
+      {props.count ? (
+        <Badge variant="secondary" className="rounded-sm px-1 font-mono font-normal">
+          {formatNumber(props.count)}
+        </Badge>
+      ) : null}
+    </SidebarMenuButton>
+  );
+}
+
+function Filter(props: { name: string; children: ReactNode }) {
+  return (
+    <Fragment key={props.name}>
+      <SidebarGroup key={props.name} className="py-0">
+        <Collapsible className="group/collapsible">{props.children}</Collapsible>
+      </SidebarGroup>
+      <SidebarSeparator className="mx-0" />
+    </Fragment>
+  );
+}
+
+const DoubleSlider = forwardRef<
+  ElementRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-800">
+      <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
+    </SliderPrimitive.Track>
+    {props.value?.map((_, index) => (
+      <SliderPrimitive.Thumb
+        key={index}
+        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+      />
+    ))}
+  </SliderPrimitive.Root>
+));
+
+export function DurationFilter(props: {
+  value: [number, number] | [];
+  onChange(value: [number, number]): void;
+}) {
+  const minValue = 0;
+  const maxValue = 100000;
+  const defaultValues: [number, number] = [minValue, maxValue];
+  const values: [number, number] = props.value.length ? props.value : defaultValues;
+
+  const handleSliderChange = (newValues: [number, number]) => {
+    props.onChange(newValues);
+  };
+
+  const handleInputChange = (index: number, value: string) => {
+    const numValue = Number.parseInt(value) || minValue;
+    const newValues: [number, number] = [...values];
+    newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
+    props.onChange(newValues);
+  };
+
+  return (
+    <Filter name="Duration">
+      <FilterTitle
+        changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
+        children={'Duration'}
+        onReset={() => props.onChange(defaultValues)}
+      />
+      <FilterContent>
+        <div className="space-y-6 p-2">
+          <div className="space-y-2">
+            <div className="space-y-1">
+              <label className="font-mono text-xs text-zinc-400">MIN</label>
+              <div className="relative">
+                <FilterInput
+                  type="number"
+                  value={values[0]}
+                  onChange={e => handleInputChange(0, e.target.value)}
+                  className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
+                />
+                <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
+                  ms
+                </span>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <label className="font-mono text-xs text-zinc-400">MAX</label>
+              <div className="relative">
+                <FilterInput
+                  type="number"
+                  value={values[1]}
+                  onChange={e => handleInputChange(1, e.target.value)}
+                  className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
+                />
+                <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
+                  ms
+                </span>
+              </div>
+            </div>
+          </div>
+          <DoubleSlider
+            defaultValue={defaultValues}
+            max={maxValue}
+            min={minValue}
+            step={1}
+            value={values}
+            onValueChange={handleSliderChange}
+            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+          />
+        </div>
+      </FilterContent>
+    </Filter>
+  );
+}
+
+export function TimelineFilter() {
+  const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
+  const [dateRange, setDateRange] = useState<DateRange | undefined>({
+    from: addDays(new Date(), -3),
+    to: new Date(),
+  });
+
+  const formatted = useMemo(() => {
+    if (!dateRange?.from || !dateRange.to || selectedPreset !== 'custom') {
+      return 'Select time period';
+    }
+
+    const fromDate = formatDate(dateRange.from, 'MMM d');
+    const fromTime = formatDate(dateRange.from, 'HH:mm');
+    const toDate = formatDate(dateRange.to, 'MMM d');
+    const toTime = formatDate(dateRange.to, 'HH:mm');
+
+    if (fromDate === toDate) {
+      return `${fromDate}, ${fromTime} - ${toTime}`;
+    }
+
+    return `${fromDate}, ${fromTime} - ${toDate}, ${toTime}`;
+  }, [dateRange, selectedPreset]);
+
+  return (
+    <Filter name="Timeline">
+      <FilterTitle changes={0} children={'Timeline'} onReset={() => {}} />
+      <FilterContent>
+        <div className="space-y-2 p-2">
+          <Select value={selectedPreset ?? undefined} onValueChange={setSelectedPreset}>
+            <SelectTrigger className="bg-background w-full">
+              <SelectValue placeholder="Select time period" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last-5min">Last 5 minutes</SelectItem>
+              <SelectItem value="last-1h">Last 1 hour</SelectItem>
+              <SelectItem value="last-3h">Last 3 hours</SelectItem>
+              <SelectItem value="last-12h">Last 12 hours</SelectItem>
+              <SelectItem value="last-24h">Last 24 hours</SelectItem>
+              <SelectItem value="custom">Custom</SelectItem>
+            </SelectContent>
+          </Select>
+          {selectedPreset === 'custom' ? (
+            <>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button variant="outline" className="w-full justify-start px-2 text-left">
+                    <CalendarIcon className="mr-2 size-4" />{' '}
+                    <span className="text-xs">{formatted}</span>
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="center">
+                  <Calendar
+                    initialFocus
+                    mode="range"
+                    defaultMonth={dateRange?.from}
+                    selected={dateRange}
+                    onSelect={setDateRange}
+                    numberOfMonths={1}
+                    className="p-2 pb-0"
+                  />
+                  <div className="border-border mt-4 space-y-2 border-t p-2">
+                    <div>
+                      <Label className="text-sm font-normal text-gray-500">Start</Label>
+                      <div className="flex items-center gap-x-2">
+                        <Input
+                          className="h-8 w-[152px] py-0"
+                          value={dateRange?.from ? formatDate(dateRange.from, 'yyyy-MM-dd') : ''}
+                        />
+                        <Input
+                          className="h-8 w-16 py-0"
+                          value={dateRange?.from ? formatDate(dateRange.from, 'HH:mm') : ''}
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <Label className="text-sm font-normal text-gray-500">End</Label>
+                      <div className="flex items-center gap-x-2">
+                        <Input
+                          className="h-8 w-[152px] py-0"
+                          value={dateRange?.to ? formatDate(dateRange.to, 'yyyy-MM-dd') : ''}
+                        />
+                        <Input
+                          className="h-8 w-16 py-0"
+                          value={dateRange?.to ? formatDate(dateRange.to, 'HH:mm') : ''}
+                        />
+                      </div>
+                    </div>
+                    <Button variant="outline" size="sm" className="w-full">
+                      <span className="relative">
+                        Apply
+                        <span className="absolute top-[4px] ml-2 text-xs">↵</span>
+                      </span>
+                    </Button>
+                  </div>
+                </PopoverContent>
+              </Popover>
+            </>
+          ) : null}
+        </div>
+      </FilterContent>
+    </Filter>
+  );
+}
diff --git a/packages/web/app/src/pages/target-insights-new-trace.tsx b/packages/web/app/src/pages/target-insights-new-trace.tsx
new file mode 100644
index 0000000000..dd0e50821a
--- /dev/null
+++ b/packages/web/app/src/pages/target-insights-new-trace.tsx
@@ -0,0 +1,649 @@
+import {
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  Fragment,
+  InputHTMLAttributes,
+  ReactNode,
+  useMemo,
+  useState,
+} from 'react';
+import { formatDate } from 'date-fns';
+import {
+  ArrowLeft,
+  ArrowUpDown,
+  Check,
+  ChevronDown,
+  ChevronRight,
+  ExternalLink,
+  MoreHorizontal,
+  Search,
+  SearchIcon,
+} from 'lucide-react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { Page, TargetLayout } from '@/components/layouts/target';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Input } from '@/components/ui/input';
+import { Meta } from '@/components/ui/meta';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarProvider,
+  SidebarSeparator,
+} from '@/components/ui/sidebar';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { formatDuration, formatNumber } from '@/lib/hooks';
+import { cn } from '@/lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Link } from '@tanstack/react-router';
+
+function FilterSearch() {
+  return (
+    <div className="mt-4 flex w-full max-w-sm items-center space-x-2">
+      <FilterInput type="text" placeholder="Search values" />
+    </div>
+  );
+}
+
+function Filter(props: { name: string; items: ReactNode[]; hideSearch?: boolean }) {
+  return (
+    <Fragment key={props.name}>
+      <SidebarGroup key={props.name} className="py-0">
+        <Collapsible className="group/collapsible">
+          <SidebarGroupLabel
+            asChild
+            className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+          >
+            <CollapsibleTrigger>
+              {props.name}{' '}
+              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                {!props.hideSearch && <FilterSearch />}
+                {props.items.map((item, index) => (
+                  <SidebarMenuButton>
+                    <div
+                      data-active={index < 2}
+                      className="group/filter-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+                    >
+                      <Check className="hidden size-3 group-data-[active=true]/filter-item:block" />
+                    </div>
+                    {item}
+                  </SidebarMenuButton>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </Collapsible>
+      </SidebarGroup>
+      <SidebarSeparator className="mx-0" />
+    </Fragment>
+  );
+}
+
+function LabelWithColor(props: { className: string; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-x-2">
+      <div className={cn(`rounded-xs h-[11px] w-[2px]`, props.className)}></div>
+      <div>{props.children}</div>
+    </div>
+  );
+}
+
+function LabelWithBadge(props: {
+  children: ReactNode;
+  badgeText: string;
+  side?: 'left' | 'right';
+}) {
+  return (
+    <div
+      className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
+    >
+      <Badge variant="outline" className="rounded-sm px-1 font-normal">
+        {props.badgeText}
+      </Badge>
+      <span className="text-foreground font-medium">{props.children}</span>
+    </div>
+  );
+}
+
+const DoubleSlider = forwardRef<
+  ElementRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-800">
+      <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
+    </SliderPrimitive.Track>
+    {props.value?.map((_, index) => (
+      <SliderPrimitive.Thumb
+        key={index}
+        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+      />
+    ))}
+  </SliderPrimitive.Root>
+));
+DoubleSlider.displayName = 'DoubleSlider';
+
+interface FilterInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+FilterInput.displayName = 'Input';
+
+function DurationFilter() {
+  const [values, setValues] = useState([6019, 100000]);
+
+  const handleSliderChange = (newValues: number[]) => {
+    setValues(newValues);
+  };
+
+  const handleInputChange = (index: number, value: string) => {
+    const numValue = Number.parseFloat(value) || 0;
+    const newValues = [...values];
+    newValues[index] = Math.min(Math.max(numValue, 0), 100000);
+    setValues(newValues);
+  };
+
+  return (
+    <Fragment>
+      <SidebarGroup className="py-0">
+        <Collapsible className="group/collapsible">
+          <SidebarGroupLabel
+            asChild
+            className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+          >
+            <CollapsibleTrigger>
+              Duration{' '}
+              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <div className="space-y-6 rounded-lg bg-zinc-950 p-2">
+                  <div className="space-y-2">
+                    <div className="space-y-1">
+                      <label className="font-mono text-xs text-zinc-400">MIN</label>
+                      <div className="relative">
+                        <FilterInput
+                          type="number"
+                          value={values[0].toFixed(2)}
+                          onChange={e => handleInputChange(0, e.target.value)}
+                          className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
+                        />
+                        <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
+                          ms
+                        </span>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="font-mono text-xs text-zinc-400">MAX</label>
+                      <div className="relative">
+                        <FilterInput
+                          type="number"
+                          value={values[1].toFixed(2)}
+                          onChange={e => handleInputChange(1, e.target.value)}
+                          className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
+                        />
+                        <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
+                          ms
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                  <DoubleSlider
+                    defaultValue={[6019, 100000]}
+                    max={100000}
+                    min={0}
+                    step={1}
+                    value={values}
+                    onValueChange={handleSliderChange}
+                    className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+                  />
+                </div>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </Collapsible>
+      </SidebarGroup>
+      <SidebarSeparator className="mx-0" />
+    </Fragment>
+  );
+}
+
+function Filters() {
+  return (
+    <>
+      <DurationFilter />
+      <Filter
+        name="Status"
+        hideSearch
+        items={[
+          <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
+          <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
+        ]}
+      />
+      <Filter name="Operation Kind" hideSearch items={['Query', 'Mutation', 'Subscription']} />
+      <Filter name="Subgraph Name" items={['link', 'products', 'prices']} />
+      <Filter
+        name="Operation Name"
+        items={[
+          <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
+          <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
+          <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
+        ]}
+      />
+      <Filter
+        name="Client"
+        items={[
+          'unknown',
+          'hive-app',
+          'Hive CLI',
+          'Hive Client',
+          <LabelWithBadge side="right" badgeText="0.46.0">
+            Hive CLI
+          </LabelWithBadge>,
+          <LabelWithBadge side="right" badgeText="0.25.3">
+            Hive Client
+          </LabelWithBadge>,
+        ]}
+      />
+      <Filter name="HTTP Status Code" items={['200', '400', '500']} />
+      <Filter name="HTTP Method" hideSearch items={['POST', 'GET']} />
+      <Filter name="HTTP Host" items={['localhost:4000', 'localhost:4200', 'localhost:3000']} />
+      <Filter name="HTTP Route" items={['/graphql', '/']} />
+      <Filter
+        name="HTTP URL"
+        items={[
+          'http://localhost:3000/',
+          'http://localhost:4000/graphql',
+          'http://localhost:4200/graphql',
+        ]}
+      />
+    </>
+  );
+}
+
+function TargetInsightsNewPageContent() {
+  return (
+    <div className="py-6">
+      <SidebarProvider>
+        <Sidebar collapsible="none" className="bg-transparent">
+          <SidebarContent>
+            <SidebarGroupLabel>Filters</SidebarGroupLabel>
+            <Filters />
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset className="bg-transparent">
+          <div className="flex flex-1 flex-col gap-4 p-4">
+            <div className="flex h-screen flex-col bg-[#121212] text-gray-200">
+              {/* Header */}
+              <div className="border-b border-gray-800">
+                <div className="flex items-center gap-2 p-2">
+                  <Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-200">
+                    <ArrowLeft className="h-4 w-4" />
+                  </Button>
+                  <div className="flex items-center gap-2">
+                    <span className="text-gray-400">Trace ID</span>
+                    <span className="font-mono">6bdd1c9219d65af865e8282f4ee55c65</span>
+                  </div>
+                  <div className="ml-auto flex items-center gap-4">
+                    <div className="flex flex-col items-end">
+                      <span className="text-sm">Total Spans</span>
+                      <span className="text-xl font-bold">11</span>
+                    </div>
+                    <div className="flex flex-col items-end">
+                      <span className="text-sm">Error Spans</span>
+                      <span className="text-xl font-bold">0</span>
+                    </div>
+                  </div>
+                  <div className="ml-4 flex items-center gap-2">
+                    <input type="checkbox" id="span-details" className="accent-blue-500" checked />
+                    <label htmlFor="span-details" className="text-sm">
+                      Span Details
+                    </label>
+                  </div>
+                  <Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-200">
+                    <ExternalLink className="h-4 w-4" />
+                  </Button>
+                </div>
+
+                <div className="flex items-center gap-4 px-4 py-2 text-sm">
+                  <div className="flex items-center gap-2">
+                    <span className="flex items-center gap-1">
+                      <span className="inline-block flex h-4 w-4 items-center justify-center rounded bg-gray-700">
+                        <span className="inline-block h-2 w-2 rounded bg-gray-400"></span>
+                      </span>
+                      my-gateway
+                    </span>
+                    <span className="text-gray-500">—</span>
+                    <span className="rounded bg-gray-800 px-2 py-0.5">POST /graphql</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="inline-block flex h-4 w-4 items-center justify-center rounded-full bg-gray-800">
+                      <span className="inline-block h-2 w-2 rounded-full border-2 border-gray-400"></span>
+                    </span>
+                    <span>16 ms</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="inline-block flex h-4 w-4 items-center justify-center rounded-full bg-gray-800">
+                      <span className="inline-block h-2 w-2 rounded-full border-2 border-gray-400"></span>
+                    </span>
+                    <span>Feb 25, 2025 — 11:38:13</span>
+                  </div>
+                </div>
+              </div>
+
+              {/* Main Content */}
+              <div className="flex flex-1 overflow-hidden">
+                {/* Left and Center Panels */}
+                <div className="flex-1 overflow-auto">
+                  {/* Flamegraph Section */}
+                  <div className="border-b border-gray-800">
+                    <div className="flex items-center gap-2 p-2">
+                      <Button variant="ghost" className="gap-2 text-sm hover:bg-gray-800">
+                        <span className="inline-block flex h-4 w-4 items-center justify-center rounded bg-gray-700">
+                          <span className="inline-block h-2 w-2 rounded bg-gray-400"></span>
+                        </span>
+                        Flamegraph
+                      </Button>
+                    </div>
+
+                    <div className="grid grid-cols-[1fr,2fr] gap-4 p-4">
+                      <div className="flex items-center justify-between rounded bg-gray-800 p-2">
+                        <span className="text-gray-400">% exec time</span>
+                      </div>
+
+                      <div className="flex flex-col gap-2">
+                        <div className="h-4 rounded bg-[#5bbcd6]"></div>
+                        <div className="h-4 rounded bg-[#5bbcd6]"></div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center px-4 pb-4">
+                      <div className="mr-2 h-6 w-6 rounded bg-red-500"></div>
+                      <span>my-gateway</span>
+                      <div className="ml-auto flex items-center gap-2">
+                        <div className="h-2 w-16 rounded bg-green-500"></div>
+                        <span>100%</span>
+                      </div>
+                    </div>
+
+                    <div className="px-4 pb-4">
+                      <div className="relative h-4">
+                        <div className="absolute inset-0 flex justify-between">
+                          <span>0ms</span>
+                          <span>3ms</span>
+                          <span>6ms</span>
+                          <span>9ms</span>
+                          <span>12ms</span>
+                          <span>16ms</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Search Filter */}
+                  <div className="p-4">
+                    <Input
+                      className="border-gray-700 bg-gray-900 text-gray-300 placeholder:text-gray-500"
+                      placeholder={`Search Filter : select options from suggested values, for IN/NOT IN operators - press "Enter" after selecting options`}
+                    />
+                  </div>
+
+                  {/* Spans Tree */}
+                  <div className="p-4">
+                    <div className="mb-4 flex items-center gap-2">
+                      <ChevronDown className="h-4 w-4" />
+                      <span className="font-bold">11</span>
+                      <span className="rounded bg-gray-800 px-2 py-0.5">POST /graphql</span>
+                    </div>
+
+                    {/* Span Items */}
+                    <div className="space-y-4">
+                      {/* POST /graphql */}
+                      <div className="border-l-2 border-gray-700 pl-4">
+                        <div className="flex items-center">
+                          <span className="w-24">my-gateway</span>
+                          <div className="mx-4 flex-1">
+                            <div className="h-4 w-full rounded-sm bg-[#5bbcd6]"></div>
+                          </div>
+                          <span className="w-16 text-right">16.69 ms</span>
+                        </div>
+                      </div>
+
+                      {/* graphql.execute */}
+                      <div className="border-l-2 border-gray-700 pl-4">
+                        <div className="flex items-center">
+                          <span className="flex w-24 items-center gap-1">
+                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
+                            graphql.execute
+                          </span>
+                          <div className="mx-4 flex-1">
+                            <div className="h-4 w-full rounded-sm bg-[#5bbcd6]"></div>
+                          </div>
+                          <span className="w-16 text-right">16.24 ms</span>
+                        </div>
+                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
+                          <span className="w-24">my-gateway</span>
+                        </div>
+                      </div>
+
+                      {/* graphql.parse */}
+                      <div className="border-l-2 border-gray-700 pl-4">
+                        <div className="flex items-center">
+                          <span className="flex w-24 items-center gap-1">
+                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
+                            graphql.parse
+                          </span>
+                          <div className="mx-4 flex-1">
+                            <div className="h-4 w-[2%] rounded-sm bg-[#5bbcd6]"></div>
+                          </div>
+                          <span className="w-16 text-right">0.03 ms</span>
+                        </div>
+                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
+                          <span className="w-24">my-gateway</span>
+                        </div>
+                      </div>
+
+                      {/* graphql.validate */}
+                      <div className="border-l-2 border-gray-700 pl-4">
+                        <div className="flex items-center">
+                          <span className="flex w-24 items-center gap-1">
+                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
+                            graphql.validate
+                          </span>
+                          <div className="mx-4 flex-1">
+                            <div className="h-4 w-[1%] rounded-sm bg-[#5bbcd6]"></div>
+                          </div>
+                          <span className="w-16 text-right">0.02 ms</span>
+                        </div>
+                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
+                          <span className="w-24">my-gateway</span>
+                        </div>
+                      </div>
+
+                      {/* subgraph.execute */}
+                      <div className="border-l-2 border-gray-700 pl-4">
+                        <div className="flex items-center">
+                          <span className="flex w-24 items-center gap-1">
+                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
+                            subgraph.execute (products)
+                          </span>
+                          <div className="mx-4 flex-1">
+                            <div className="h-4 w-[20%] rounded-sm bg-[#5bbcd6]"></div>
+                          </div>
+                          <span className="w-16 text-right">3.35 ms</span>
+                        </div>
+                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
+                          <span className="w-24">my-gateway</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Panel - Span Details */}
+                <div className="w-80 overflow-auto border-l border-gray-800">
+                  <div className="space-y-6 p-4">
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">SPAN NAME</h3>
+                      <div className="rounded bg-gray-800 p-2">subgraph.execute (list)</div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">SPAN ID</h3>
+                      <div className="rounded bg-gray-800 p-2 font-mono text-sm">
+                        cba5a169850884d6
+                      </div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">START TIME</h3>
+                      <div className="rounded bg-gray-800 p-2">Feb 25, 2025 — 11:38:13</div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">DURATION</h3>
+                      <div className="rounded bg-gray-800 p-2">1.8 ms</div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">SERVICE</h3>
+                      <div className="flex items-center gap-2 rounded bg-gray-800 p-2">
+                        <span className="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
+                        my-gateway
+                      </div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">SPAN KIND</h3>
+                      <div className="rounded bg-gray-800 p-2">Client</div>
+                    </div>
+
+                    <div>
+                      <h3 className="mb-2 text-xs text-gray-500">STATUS CODE STRING</h3>
+                      <div className="rounded bg-gray-800 p-2">Ok</div>
+                    </div>
+
+                    <Button className="w-full bg-gray-800 text-gray-300 hover:bg-gray-700">
+                      Go to related logs
+                    </Button>
+
+                    <Tabs defaultValue="attributes">
+                      <TabsList className="w-full justify-start gap-8 border-b border-gray-700 bg-transparent pb-2">
+                        <TabsTrigger
+                          value="attributes"
+                          className="rounded-none bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
+                        >
+                          Attributes
+                        </TabsTrigger>
+                        <TabsTrigger
+                          value="events"
+                          className="rounded-none bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
+                        >
+                          Events
+                        </TabsTrigger>
+                        <div className="ml-auto">
+                          <Search className="h-4 w-4" />
+                        </div>
+                      </TabsList>
+
+                      <TabsContent value="attributes" className="mt-4">
+                        <div className="space-y-4">
+                          <div>
+                            <div className="text-sm">gateway.upstream.subgraph.name</div>
+                            <div className="mt-1 rounded bg-gray-800 p-2">list</div>
+                          </div>
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="events">
+                        <div className="p-4 text-center text-gray-500">No events</div>
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                </div>
+              </div>
+            </div>
+            )
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  );
+}
+
+export function TargetInsightsNewTracePage(props: {
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+}) {
+  return (
+    <>
+      <Meta title="Insights" />
+      <TargetLayout
+        organizationSlug={props.organizationSlug}
+        projectSlug={props.projectSlug}
+        targetSlug={props.targetSlug}
+        page={Page.Insights}
+      >
+        <TargetInsightsNewPageContent />
+      </TargetLayout>
+    </>
+  );
+}
diff --git a/packages/web/app/src/pages/target-insights-new-width.tsx b/packages/web/app/src/pages/target-insights-new-width.tsx
new file mode 100644
index 0000000000..fdcd1bfd14
--- /dev/null
+++ b/packages/web/app/src/pages/target-insights-new-width.tsx
@@ -0,0 +1,58 @@
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useDeferredValue,
+  useRef,
+  useState,
+} from 'react';
+
+interface WidthSyncContextType {
+  width: number;
+  updateWidth: (newWidth: number) => void;
+}
+
+const WidthSyncContext = createContext<WidthSyncContextType | null>(null);
+
+interface WidthSyncProviderProps {
+  children: ReactNode;
+  defaultWidth: number;
+}
+
+export const WidthSyncProvider: FC<WidthSyncProviderProps> = props => {
+  const [width, setWidth] = useState<number>(props.defaultWidth);
+  // Throttle state to avoid too many updates during slider dragging
+  const throttleTimerRef = useRef<number | null>(null);
+
+  // Ensure width stays within bounds and apply to all registered components
+  const handleSetWidth = useCallback((newWidth: number) => {
+    // Clear any existing throttle timer
+    if (throttleTimerRef.current !== null) {
+      window.cancelAnimationFrame(throttleTimerRef.current);
+    }
+
+    // Use requestAnimationFrame for smoother updates
+    throttleTimerRef.current = window.requestAnimationFrame(() => {
+      const boundedWidth = newWidth;
+      setWidth(boundedWidth);
+
+      throttleTimerRef.current = null;
+    });
+  }, []);
+
+  return (
+    <WidthSyncContext.Provider value={{ width, updateWidth: handleSetWidth }}>
+      {props.children}
+    </WidthSyncContext.Provider>
+  );
+};
+
+export const useWidthSync = () => {
+  const context = useContext(WidthSyncContext);
+  if (!context) {
+    throw new Error('useWidthSync must be used within a WidthSyncProvider');
+  }
+  return [context.width, context.updateWidth] as const;
+};
diff --git a/packages/web/app/src/pages/target-insights-new.tsx b/packages/web/app/src/pages/target-insights-new.tsx
new file mode 100644
index 0000000000..d25fe72ecf
--- /dev/null
+++ b/packages/web/app/src/pages/target-insights-new.tsx
@@ -0,0 +1,2181 @@
+import { Fragment, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { addDays, formatDate, formatISO, parse as parseDate } from 'date-fns';
+import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
+import {
+  AlertTriangle,
+  ArrowUpDown,
+  CalendarIcon,
+  ChevronRight,
+  Clock,
+  ExternalLinkIcon,
+  FilterIcon,
+  SearchIcon,
+  XIcon,
+} from 'lucide-react';
+import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
+import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
+import { Page, TargetLayout } from '@/components/layouts/target';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Meta } from '@/components/ui/meta';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInset,
+  SidebarMenu,
+  SidebarProvider,
+  SidebarSeparator,
+} from '@/components/ui/sidebar';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { formatDuration } from '@/lib/hooks';
+import { cn } from '@/lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { Link } from '@tanstack/react-router';
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+  VisibilityState,
+} from '@tanstack/react-table';
+import {
+  DurationFilter,
+  FilterInput,
+  MultiInputFilter,
+  MultiSelectFilter,
+  TimelineFilter,
+} from './target-insights-new-filter';
+import { useWidthSync, WidthSyncProvider } from './target-insights-new-width';
+
+const rootSpan: SpanProps = {
+  id: 'root',
+  title: 'FetchProducts',
+  serviceName: 'gateway',
+  duration: 8.12,
+  startedAt: 0,
+  children: [
+    {
+      id: '1ns581b',
+      title: 'plan',
+      serviceName: 'gateway',
+      duration: 2.3,
+      startedAt: 0.2,
+      children: [],
+    },
+    {
+      id: '213hbsdgs',
+      title: 'subgraph',
+      serviceName: 'products',
+      duration: 4.06,
+      startedAt: 2.3,
+      children: [
+        {
+          id: '138sndhs',
+          title: 'parse',
+          duration: 0.1,
+          startedAt: 2.4,
+          children: [],
+        },
+        {
+          id: '1n1bsxs1',
+          title: 'validate',
+          duration: 0.9,
+          startedAt: 2.5,
+          children: [],
+        },
+      ],
+    },
+    {
+      id: '1n23sxs1',
+      title: 'subgraph',
+      serviceName: 'prices',
+      duration: 2.03,
+      startedAt: 4.06,
+      children: [
+        {
+          id: '19nxb23b',
+          title: 'parse',
+          duration: 0.1,
+          startedAt: 4.1,
+          children: [],
+        },
+        {
+          id: '284bsdb1',
+          title: 'validate',
+          duration: 1.2,
+          startedAt: 4.2,
+          children: [
+            {
+              id: '284bsdb1',
+              title: 'async validation',
+              duration: 0.2,
+              startedAt: 5.4,
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+const chartData = [
+  { date: '2024-04-01', ok: 222, error: 15 },
+  { date: '2024-04-02', ok: 97, error: 18 },
+  { date: '2024-04-03', ok: 167, error: 12 },
+  { date: '2024-04-04', ok: 242, error: 26 },
+  { date: '2024-04-05', ok: 373, error: 29 },
+  { date: '2024-04-06', ok: 301, error: 34 },
+  { date: '2024-04-07', ok: 245, error: 18 },
+  { date: '2024-04-08', ok: 409, error: 32 },
+  { date: '2024-04-09', ok: 59, error: 11 },
+  { date: '2024-04-10', ok: 261, error: 19 },
+  { date: '2024-04-11', ok: 327, error: 35 },
+  { date: '2024-04-12', ok: 292, error: 21 },
+  { date: '2024-04-13', ok: 342, error: 38 },
+  { date: '2024-04-14', ok: 137, error: 22 },
+  { date: '2024-04-15', ok: 120, error: 17 },
+  { date: '2024-04-16', ok: 138, error: 19 },
+  { date: '2024-04-17', ok: 446, error: 36 },
+  { date: '2024-04-18', ok: 364, error: 41 },
+  { date: '2024-04-19', ok: 243, error: 18 },
+  { date: '2024-04-20', ok: 89, error: 15 },
+  { date: '2024-04-21', ok: 137, error: 20 },
+  { date: '2024-04-22', ok: 224, error: 17 },
+  { date: '2024-04-23', ok: 138, error: 23 },
+  { date: '2024-04-24', ok: 387, error: 29 },
+  { date: '2024-04-25', ok: 215, error: 25 },
+  { date: '2024-04-26', ok: 75, error: 13 },
+  { date: '2024-04-27', ok: 383, error: 42 },
+  { date: '2024-04-28', ok: 122, error: 18 },
+  { date: '2024-04-29', ok: 315, error: 24 },
+  { date: '2024-04-30', ok: 454, error: 38 },
+  { date: '2024-05-01', ok: 165, error: 22 },
+  { date: '2024-05-02', ok: 293, error: 31 },
+  { date: '2024-05-03', ok: 247, error: 19 },
+  { date: '2024-05-04', ok: 385, error: 42 },
+  { date: '2024-05-05', ok: 481, error: 39 },
+  { date: '2024-05-06', ok: 498, error: 52 },
+  { date: '2024-05-07', ok: 388, error: 30 },
+  { date: '2024-05-08', ok: 149, error: 21 },
+  { date: '2024-05-09', ok: 227, error: 18 },
+  { date: '2024-05-10', ok: 293, error: 33 },
+  { date: '2024-05-11', ok: 335, error: 27 },
+  { date: '2024-05-12', ok: 197, error: 24 },
+  { date: '2024-05-13', ok: 197, error: 16 },
+  { date: '2024-05-14', ok: 448, error: 49 },
+  { date: '2024-05-15', ok: 473, error: 38 },
+  { date: '2024-05-16', ok: 338, error: 40 },
+  { date: '2024-05-17', ok: 499, error: 42 },
+  { date: '2024-05-18', ok: 315, error: 35 },
+  { date: '2024-05-19', ok: 235, error: 18 },
+  { date: '2024-05-20', ok: 177, error: 23 },
+  { date: '2024-05-21', ok: 82, error: 14 },
+  { date: '2024-05-22', ok: 81, error: 12 },
+  { date: '2024-05-23', ok: 252, error: 29 },
+  { date: '2024-05-24', ok: 294, error: 22 },
+  { date: '2024-05-25', ok: 201, error: 25 },
+  { date: '2024-05-26', ok: 213, error: 17 },
+  { date: '2024-05-27', ok: 420, error: 46 },
+  { date: '2024-05-28', ok: 233, error: 19 },
+  { date: '2024-05-29', ok: 78, error: 13 },
+  { date: '2024-05-30', ok: 340, error: 28 },
+  { date: '2024-05-31', ok: 178, error: 23 },
+  { date: '2024-06-01', ok: 178, error: 20 },
+  { date: '2024-06-02', ok: 470, error: 41 },
+  { date: '2024-06-03', ok: 103, error: 16 },
+  { date: '2024-06-04', ok: 439, error: 38 },
+  { date: '2024-06-05', ok: 88, error: 14 },
+  { date: '2024-06-06', ok: 294, error: 25 },
+  { date: '2024-06-07', ok: 323, error: 37 },
+  { date: '2024-06-08', ok: 385, error: 32 },
+  { date: '2024-06-09', ok: 438, error: 48 },
+  { date: '2024-06-10', ok: 155, error: 20 },
+  { date: '2024-06-11', ok: 92, error: 15 },
+  { date: '2024-06-12', ok: 492, error: 42 },
+  { date: '2024-06-13', ok: 81, error: 13 },
+  { date: '2024-06-14', ok: 426, error: 38 },
+  { date: '2024-06-15', ok: 307, error: 35 },
+  { date: '2024-06-16', ok: 371, error: 31 },
+  { date: '2024-06-17', ok: 475, error: 52 },
+  { date: '2024-06-18', ok: 107, error: 17 },
+  { date: '2024-06-19', ok: 341, error: 29 },
+  { date: '2024-06-20', ok: 408, error: 45 },
+  { date: '2024-06-21', ok: 169, error: 21 },
+  { date: '2024-06-22', ok: 317, error: 27 },
+  { date: '2024-06-23', ok: 480, error: 53 },
+  { date: '2024-06-24', ok: 132, error: 18 },
+  { date: '2024-06-25', ok: 141, error: 19 },
+  { date: '2024-06-26', ok: 434, error: 38 },
+  { date: '2024-06-27', ok: 448, error: 49 },
+  { date: '2024-06-28', ok: 149, error: 20 },
+  { date: '2024-06-29', ok: 103, error: 16 },
+  { date: '2024-06-30', ok: 446, error: 40 },
+];
+
+const chartConfig = {
+  ok: {
+    label: 'Successful',
+    color: 'hsl(var(--chart-1))',
+  },
+  error: {
+    label: 'Failed',
+    color: 'hsl(var(--chart-2))',
+  },
+} satisfies ChartConfig;
+
+function Traffic() {
+  const total = useMemo(
+    () => ({
+      ok: chartData.reduce((acc, curr) => acc + curr.ok, 0),
+      error: chartData.reduce((acc, curr) => acc + curr.error, 0),
+    }),
+    [],
+  );
+
+  const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
+  const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
+  const [zoomedData, setZoomedData] = useState<typeof data | null>(null);
+  const [isSelecting, setIsSelecting] = useState(false);
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+
+  // Handle mouse down event to start selection
+  const handleMouseDown = useCallback((e: any) => {
+    if (!e || !e.activeLabel) return;
+
+    // Check if the click is within the chart area and not on the Y-axis
+    // e.chartX is the x-coordinate of the click relative to the chart
+    if (e.chartX < 40) return; // Prevent selection when clicking on Y-axis area
+
+    setRefAreaLeft(e.activeLabel);
+    setRefAreaRight(null);
+    setIsSelecting(true);
+  }, []);
+
+  // Handle mouse move event during selection
+  const handleMouseMove = useCallback(
+    (e: any) => {
+      if (!isSelecting || !e || !e.activeLabel) return;
+      setRefAreaRight(e.activeLabel);
+    },
+    [isSelecting],
+  );
+
+  // Handle mouse up event to end selection
+  const handleMouseUp = useCallback(() => {
+    if (!refAreaLeft || !refAreaRight) {
+      setIsSelecting(false);
+      return;
+    }
+
+    // Ensure left is always before right
+    let left = refAreaLeft;
+    let right = refAreaRight;
+    const now = new Date();
+
+    if (
+      parseDate(left, 'yyyy-MM-dd', now).getTime() > parseDate(right, 'yyyy-MM-dd', now).getTime()
+    ) {
+      [left, right] = [right, left];
+    }
+
+    // Filter data to the selected range
+    const filteredData = data.filter(
+      entry =>
+        parseDate(entry.timestamp, 'yyyy-MM-dd', now).getTime() >=
+          parseDate(left, 'yyyy-MM-dd', now).getTime() &&
+        parseDate(entry.timestamp, 'YYYY-MM-dd', now).getTime() <=
+          parseDate(right, 'yyyy-MM-dd', now).getTime(),
+    );
+
+    if (filteredData.length > 0) {
+      setZoomedData(filteredData);
+    }
+
+    setRefAreaLeft(null);
+    setRefAreaRight(null);
+    setIsSelecting(false);
+  }, [refAreaLeft, refAreaRight, data]);
+
+  return (
+    <ChartContainer
+      config={chartConfig}
+      className="aspect-auto h-[150px] w-full select-none"
+      ref={chartContainerRef}
+      onMouseLeave={isSelecting ? handleMouseUp : undefined}
+    >
+      <BarChart
+        accessibilityLayer
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        data={chartData}
+      >
+        <XAxis
+          dataKey="date"
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          minTickGap={32}
+          tickFormatter={value => {
+            const date = new Date(value);
+            return date.toLocaleDateString('en-US', {
+              month: 'short',
+              day: 'numeric',
+            });
+          }}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              className="w-[150px]"
+              labelFormatter={value => {
+                return new Date(value).toLocaleDateString('en-US', {
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                });
+              }}
+            />
+          }
+        />
+        <Bar stackId="all" dataKey="ok" fill={`var(--color-ok)`} />
+        <Bar stackId="all" dataKey="error" fill={`var(--color-error)`} />
+        {refAreaLeft && refAreaRight && (
+          <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
+        )}
+      </BarChart>
+    </ChartContainer>
+  );
+}
+
+type Trace = {
+  id: string;
+  timestamp: number;
+  duration: number;
+  status: 'ok' | 'error';
+  kind: 'query' | 'mutation' | 'subscription';
+  operationName: string;
+  operationHash: string;
+  httpStatus: number;
+  httpMethod: 'GET' | 'POST';
+  httpHost: string;
+  httpRoute: string;
+  httpUrl: string;
+  subgraphNames: string[];
+};
+
+const now = new Date();
+function generateTraceId() {
+  return [...Array(32)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
+}
+const data: Trace[] = [
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime(),
+    status: 'ok',
+    duration: 6019,
+    kind: 'query',
+    operationName: 'FetchProducts',
+    operationHash: '3h1s',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['link', 'products', 'prices'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 120000,
+    status: 'ok',
+    duration: 6019,
+    kind: 'query',
+    operationName: 'FetchProducts',
+    operationHash: '3h1s',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['link', 'products', 'prices'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 240000,
+    status: 'error',
+    duration: 10045,
+    kind: 'mutation',
+    operationName: 'UpdateProduct',
+    operationHash: '8f2b',
+    httpStatus: 500,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['products'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 360000,
+    status: 'ok',
+    duration: 3045,
+    kind: 'query',
+    operationName: 'GetUser',
+    operationHash: 'a7g4',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 480000,
+    status: 'ok',
+    duration: 4521,
+    kind: 'query',
+    operationName: 'ListOrders',
+    operationHash: 'c9h2',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders', 'users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 600000,
+    status: 'error',
+    duration: 7890,
+    kind: 'mutation',
+    operationName: 'CancelOrder',
+    operationHash: 'd1k8',
+    httpStatus: 400,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 720000,
+    status: 'ok',
+    duration: 2156,
+    kind: 'subscription',
+    operationName: 'OrderStatusUpdated',
+    operationHash: 'e4m7',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 840000,
+    status: 'ok',
+    duration: 5092,
+    kind: 'query',
+    operationName: 'FetchCart',
+    operationHash: 'f2p9',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['cart', 'products'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 960000,
+    status: 'ok',
+    duration: 6820,
+    kind: 'mutation',
+    operationName: 'AddToCart',
+    operationHash: 'g7r5',
+    httpStatus: 201,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['cart'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+];
+
+export const columns: ColumnDef<Trace>[] = [
+  {
+    accessorKey: 'id',
+    header: () => <div className="text-center">Trace ID</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="w-24 truncate px-2 text-center font-mono text-xs font-medium">
+          {row.getValue('id')}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'timestamp',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="link"
+          className="text-muted-foreground"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Timestamp
+          <ArrowUpDown className="ml-2 size-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => (
+      <Tooltip delayDuration={300}>
+        <TooltipTrigger asChild>
+          <div className="px-4 font-mono text-xs uppercase">
+            {formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss')}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent
+          side="bottom"
+          className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+        >
+          <GridTable
+            rows={[
+              {
+                key: 'Local',
+                value: formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss'),
+              },
+              {
+                key: 'UTC',
+                value: formatInTimeZone(row.getValue('timestamp'), 'UTC', 'MMM dd HH:mm:ss'),
+              },
+              {
+                key: 'ISO',
+                value: formatISO(toZonedTime(row.getValue('timestamp'), 'UTC')),
+              },
+            ]}
+          />
+        </TooltipContent>
+      </Tooltip>
+    ),
+  },
+  {
+    accessorKey: 'operationName',
+    header: ({ column }) => {
+      return (
+        <div>
+          <Button
+            variant="link"
+            className="text-muted-foreground"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            Operation Name
+            <ArrowUpDown className="ml-2 size-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => (
+      <Tooltip disableHoverableContent delayDuration={100}>
+        <TooltipTrigger asChild>
+          <div className="flex items-center gap-2 px-4 text-xs">
+            <span className="text-muted-foreground font-mono">
+              {row.original.operationHash.substring(0, 4)}
+            </span>
+            <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
+              {row.original.kind.substring(0, 1).toUpperCase()}
+            </span>
+            <span>{row.getValue('operationName')}</span>
+          </div>
+        </TooltipTrigger>
+        <TooltipContent
+          side="bottom"
+          className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+        >
+          <GridTable
+            rows={[
+              {
+                key: 'Name',
+                value: row.getValue('operationName'),
+              },
+              {
+                key: 'Kind',
+                value: row.original.kind,
+              },
+              {
+                key: 'Hash',
+                value: row.original.operationHash,
+              },
+            ]}
+          />
+        </TooltipContent>
+      </Tooltip>
+    ),
+  },
+  {
+    accessorKey: 'duration',
+    header: ({ column }) => {
+      return (
+        <div>
+          <Button
+            variant="link"
+            className="text-muted-foreground"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          >
+            Duration
+            <ArrowUpDown className="ml-2 size-4" />
+          </Button>
+        </div>
+      );
+    },
+    cell: ({ row }) => {
+      const duration = formatDuration(row.getValue('duration'), true);
+      return <div className="px-4 font-mono text-xs font-medium">{duration}</div>;
+    },
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    cell: ({ row }) => {
+      const status = row.getValue('status');
+
+      return (
+        <Badge
+          variant="outline"
+          className={cn(
+            'rounded-sm border-0 px-1 text-xs font-medium uppercase',
+            status === 'ok' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+          )}
+        >
+          {status}
+        </Badge>
+      );
+    },
+  },
+  {
+    accessorKey: 'subgraphNames',
+    sortingFn(a, b, isAsc) {
+      // sort a.original.subgraphNames.length and b.original.subgraphNames.length
+      const aValue = a.original.subgraphNames.length;
+      const bValue = b.original.subgraphNames.length;
+
+      if (isAsc) {
+        return aValue - bValue;
+      }
+
+      return bValue - aValue;
+    },
+    header: ({ column }) => (
+      <div className="text-center">
+        <Button
+          variant="link"
+          className="text-muted-foreground"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Subgraphs
+          <ArrowUpDown className="ml-2 size-4" />
+        </Button>
+      </div>
+    ),
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-mono text-xs font-medium">
+          {row.getValue('subgraphNames').length}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'httpMethod',
+    header: () => <div className="text-center">HTTP Method</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-mono text-xs font-medium">
+          {row.getValue('httpMethod')}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'httpStatus',
+    header: () => <div className="text-center">HTTP Status</div>,
+    cell: ({ row }) => {
+      return (
+        <div className="text-center font-mono text-xs font-medium">
+          {row.getValue('httpStatus')}
+        </div>
+      );
+    },
+  },
+  {
+    accessorKey: 'actions',
+    header: () => <div className="text-center">Actions</div>,
+    cell: () => {
+      return (
+        <div className="text-center font-sans text-xs">
+          <Button asChild variant="link">
+            <Link to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace">
+              View Trace
+            </Link>
+          </Button>
+        </div>
+      );
+    },
+  },
+];
+
+function TracesList() {
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = useState({});
+  const [traceInSheet, setTraceInSheet] = useState<Trace | null>(null);
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
+
+  return (
+    <Sheet
+      defaultOpen={false}
+      open={traceInSheet !== null}
+      onOpenChange={isOpen => {
+        if (!isOpen) {
+          setTraceInSheet(null);
+        }
+      }}
+    >
+      <div className="rounded-lg border bg-gray-900/50 shadow-sm">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead key={header.id} className="[&:has([role=checkbox])]:pl-3">
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                  className={cn(
+                    'cursor-pointer',
+                    traceInSheet?.id === row.original.id ? 'bg-white/10' : '',
+                  )}
+                  onClick={ev => {
+                    ev.preventDefault();
+                    setTraceInSheet(row.original);
+                  }}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id} className="font-mono [&:has([role=checkbox])]:pl-3">
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 pt-4">
+        <div className="space-x-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+      <TraceSheet trace={traceInSheet} />
+    </Sheet>
+  );
+}
+
+function LabelWithColor(props: { className: string; children: ReactNode }) {
+  return (
+    <div className="flex items-center gap-x-2">
+      <div className={cn(`rounded-xs h-[11px] w-[2px]`, props.className)}></div>
+      <div>{props.children}</div>
+    </div>
+  );
+}
+
+function LabelWithBadge(props: {
+  children: ReactNode;
+  badgeText: string;
+  side?: 'left' | 'right';
+}) {
+  return (
+    <div
+      className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
+    >
+      <Badge variant="outline" className="rounded-sm px-1 font-normal">
+        {props.badgeText}
+      </Badge>
+      <span className="text-foreground font-medium">{props.children}</span>
+    </div>
+  );
+}
+
+type FilterState = {
+  'trace.id': string[];
+  duration: [] | [number, number];
+  'graphql.status': string[];
+  'graphql.kind': string[];
+  'graphql.subgraph': string[];
+  'graphql.operation': string[];
+  'graphql.client': string[];
+  'http.status': string[];
+  'http.method': string[];
+  'http.host': string[];
+  'http.route': string[];
+  'http.url': string[];
+};
+
+type FilterKeys = keyof FilterState;
+
+function Filters() {
+  const [filters, setFilters] = useState<FilterState>({
+    duration: [],
+    'trace.id': [],
+    'graphql.status': [],
+    'graphql.kind': [],
+    'graphql.subgraph': [],
+    'graphql.operation': [],
+    'graphql.client': [],
+    'http.status': [],
+    'http.method': [],
+    'http.host': [],
+    'http.route': [],
+    'http.url': [],
+  });
+
+  // Function to update a specific filter
+  const updateFilter = <$Key extends FilterKeys>(key: $Key) => {
+    return (value: FilterState[$Key]) => {
+      setFilters(prev => ({ ...prev, [key]: value }));
+    };
+  };
+
+  const resetFilters = () => {
+    setFilters({
+      duration: [],
+      'trace.id': [],
+      'graphql.status': [],
+      'graphql.kind': [],
+      'graphql.subgraph': [],
+      'graphql.operation': [],
+      'graphql.client': [],
+      'http.status': [],
+      'http.method': [],
+      'http.host': [],
+      'http.route': [],
+      'http.url': [],
+    });
+  };
+
+  const filterSelector = <$Key extends FilterKeys>(key: $Key) => filters[key];
+
+  const hasChanges = useMemo(() => {
+    for (let key in filters) {
+      const filterName = key as FilterKeys;
+
+      if (filterName === 'duration') {
+        if (
+          filters[filterName].length === 2 &&
+          (filters[filterName][0] !== 0 || filters[filterName][1] !== 100_000)
+        ) {
+          return true;
+        }
+        continue;
+      }
+
+      if (filters[filterName].length > 0) {
+        return true;
+      }
+    }
+  }, [filters]);
+
+  return (
+    <>
+      <SidebarGroupLabel className="flex items-center justify-between">
+        <div>Filters</div>
+        {hasChanges ? (
+          <Button variant="ghost" size="icon-sm" onClick={resetFilters}>
+            <XIcon className="size-4" />
+          </Button>
+        ) : null}
+      </SidebarGroupLabel>
+      <TimelineFilter />
+      <DurationFilter value={filterSelector('duration')} onChange={updateFilter('duration')} />
+      <MultiInputFilter
+        key="trace.id"
+        name="Trace ID"
+        selectedValues={filterSelector('trace.id')}
+        onChange={updateFilter('trace.id')}
+      />
+      <MultiSelectFilter
+        key="graphql.status"
+        name="Status"
+        options={[
+          {
+            value: 'ok',
+            searchContent: 'ok',
+            label: <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
+            count: 12_500_000,
+          },
+          {
+            value: 'error',
+            searchContent: 'error',
+            label: <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
+            count: 13_123,
+          },
+        ]}
+        selectedValues={filterSelector('graphql.status')}
+        onChange={updateFilter('graphql.status')}
+        hideSearch
+      />
+      <MultiSelectFilter
+        key="kind"
+        name="Operation Kind"
+        options={[
+          {
+            value: 'query',
+            searchContent: 'query',
+            label: 'Query',
+            count: 12_500_000,
+          },
+          {
+            value: 'mutation',
+            searchContent: 'mutation',
+            label: 'Mutation',
+            count: 3_200_000,
+          },
+          {
+            value: 'subscription',
+            searchContent: 'subscription',
+            label: 'Subscription',
+            count: 123_123,
+          },
+        ]}
+        selectedValues={filterSelector('graphql.kind')}
+        onChange={updateFilter('graphql.kind')}
+        hideSearch
+      />
+      <MultiSelectFilter
+        key="subgraph"
+        name="Subgraph Name"
+        options={[
+          {
+            value: 'link',
+            searchContent: 'link',
+            label: 'link',
+            count: 530_000,
+          },
+          {
+            value: 'products',
+            searchContent: 'products',
+            label: 'products',
+            count: 612_000,
+          },
+          {
+            value: 'prices',
+            searchContent: 'prices',
+            label: 'prices',
+            count: 610_000,
+          },
+        ]}
+        selectedValues={filterSelector('graphql.subgraph')}
+        onChange={updateFilter('graphql.subgraph')}
+      />
+      <MultiSelectFilter
+        key="name"
+        name="Operation Name"
+        options={[
+          {
+            value: '3h1s',
+            searchContent: '3h1s fetchproducts',
+            label: <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
+            count: 368_000,
+          },
+          {
+            value: '7na1',
+            searchContent: '7na1 fetchUsers',
+            label: <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
+            count: 123_000,
+          },
+          {
+            value: '64a1',
+            searchContent: '64a1 FetchProducts',
+            label: <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
+            count: 1_000,
+          },
+        ]}
+        selectedValues={filterSelector('graphql.operation')}
+        onChange={updateFilter('graphql.operation')}
+      />
+      <MultiSelectFilter
+        key="client"
+        name="Client"
+        options={[
+          {
+            value: 'unknown',
+            searchContent: 'unknown',
+            label: 'unknown',
+            count: 43_123,
+          },
+          {
+            value: 'hive-app',
+            searchContent: 'hive-app',
+            label: 'hive-app',
+            count: 720_000,
+          },
+          {
+            value: 'Hive CLI',
+            searchContent: 'Hive CLI',
+            label: 'Hive CLI',
+            count: 340_000,
+          },
+          {
+            value: 'Hive Client',
+            searchContent: 'Hive Client',
+            label: 'Hive Client',
+            count: 87_123,
+          },
+          {
+            value: 'Hive CLI@0.46.0',
+            searchContent: 'Hive CLI@0.46.0',
+            label: (
+              <LabelWithBadge side="right" badgeText="0.46.0">
+                Hive CLI
+              </LabelWithBadge>
+            ),
+            count: 1_000,
+          },
+          {
+            value: 'Hive Client@0.25.3',
+            searchContent: 'Hive Client@0.25.3',
+            label: (
+              <LabelWithBadge side="right" badgeText="0.25.3">
+                Hive Client
+              </LabelWithBadge>
+            ),
+            count: 6_120,
+          },
+        ]}
+        selectedValues={filterSelector('graphql.client')}
+        onChange={updateFilter('graphql.client')}
+      />
+      <MultiSelectFilter
+        key="http.status"
+        name="HTTP Status Code"
+        options={[
+          {
+            value: '200',
+            searchContent: '200',
+            label: '200',
+            count: 9_123_000,
+          },
+          {
+            value: '400',
+            searchContent: '400',
+            label: '400',
+            count: 100_000,
+          },
+          {
+            value: '500',
+            searchContent: '500',
+            label: '500',
+            count: 52_400,
+          },
+        ]}
+        selectedValues={filterSelector('http.status')}
+        onChange={updateFilter('http.status')}
+        hideSearch
+      />
+      <MultiSelectFilter
+        key="http.method"
+        name="HTTP Method"
+        options={[
+          {
+            value: 'GET',
+            searchContent: 'get',
+            label: 'GET',
+            count: 1230,
+          },
+          {
+            value: 'POST',
+            searchContent: 'post',
+            label: 'POST',
+            count: 12_000_000,
+          },
+        ]}
+        selectedValues={filterSelector('http.method')}
+        onChange={updateFilter('http.method')}
+        hideSearch
+      />
+      <MultiSelectFilter
+        key="http.host"
+        name="HTTP Host"
+        options={[
+          {
+            value: 'localhost:4000',
+            searchContent: 'localhost:4000',
+            label: 'localhost:4000',
+            count: 12_000_000,
+          },
+          {
+            value: 'localhost:4200',
+            searchContent: 'localhost:4200',
+            label: 'localhost:4200',
+            count: 7_540_123,
+          },
+          {
+            value: 'localhost:3000',
+            searchContent: 'localhost:3000',
+            label: 'localhost:3000',
+            count: 2_320_123,
+          },
+        ]}
+        selectedValues={filterSelector('http.host')}
+        onChange={updateFilter('http.host')}
+      />
+      <MultiSelectFilter
+        key="http.route"
+        name="HTTP Route"
+        options={[
+          {
+            value: '/graphql',
+            searchContent: '/graphql',
+            label: '/graphql',
+            count: 12_000_000,
+          },
+          {
+            value: '/',
+            searchContent: '/',
+            label: '/',
+            count: 7_540_123,
+          },
+        ]}
+        selectedValues={filterSelector('http.route')}
+        onChange={updateFilter('http.route')}
+      />
+      <MultiSelectFilter
+        key="http.url"
+        name="HTTP URL"
+        options={[
+          {
+            value: 'http://localhost:3000/',
+            searchContent: 'http://localhost:3000/',
+            label: 'http://localhost:3000/',
+            count: 12_000_000,
+          },
+          {
+            value: 'http://localhost:4000/graphql',
+            searchContent: 'http://localhost:4000/graphql',
+            label: 'http://localhost:4000/graphql',
+            count: 7_540_123,
+          },
+          {
+            value: 'http://localhost:4200/graphql',
+            searchContent: 'http://localhost:4200/graphql',
+            label: 'http://localhost:4200/graphql',
+            count: 2_320_123,
+          },
+        ]}
+        selectedValues={filterSelector('http.url')}
+        onChange={updateFilter('http.url')}
+      />
+    </>
+  );
+}
+
+const fetchProductsQueryString = `
+  query FetchProduct {
+    products {
+      id
+      name
+      price
+    }
+  }
+`;
+
+interface TraceAttribute {
+  name: string;
+  value: string | number | ReactNode;
+  category?: string;
+}
+
+function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
+  const [width] = useWidthSync();
+  const [highlightedServiceName, setHighlightedServiceName] = useState<string | null>(null);
+  const rootSpan = props.rootSpan;
+  const serviceNames = props.serviceNames;
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="sticky top-0 z-10 border-b border-gray-800">
+        <div className="flex w-full items-center text-xs text-white">
+          <div className="h-12 shrink-0 py-2" style={{ width }}>
+            <div className="pl-4">
+              <div className="font-medium">Timeline</div>
+              <div className="text-xs text-gray-500">Spans and details</div>
+            </div>
+          </div>
+          <div className="h-12 grow pr-8">
+            <div className="relative h-full w-full">
+              <div className="absolute left-0 top-6 -translate-x-1/2 text-center">0ms</div>
+              <div className="absolute bottom-0 left-0 h-2 w-px bg-[#27272a]" />
+              <div className="absolute left-[25%] top-6 -translate-x-1/2 text-center">2.03ms</div>
+              <div className="absolute bottom-0 left-[25%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute left-[50%] top-6 -translate-x-1/2 text-center">4.06ms</div>
+              <div className="absolute bottom-0 left-[50%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute left-[75%] top-6 -translate-x-1/2 text-center">6.09ms</div>
+              <div className="absolute bottom-0 left-[75%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute right-0 top-6 translate-x-1/2 text-center">8.12ms</div>
+              <div className="absolute bottom-0 right-0 h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ScrollArea className="flex-grow">
+        <div>
+          <TraceTree
+            leftPanelWidth={width}
+            rootSpan={rootSpan}
+            highlightedServiceName={highlightedServiceName}
+          />
+        </div>
+      </ScrollArea>
+      <div className="sticky bottom-0 z-10 px-2 py-4">
+        <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
+          {serviceNames.map((serviceName, index) => (
+            <div
+              key={serviceName}
+              className="flex cursor-pointer items-center gap-2 hover:text-white"
+              onMouseEnter={() => setHighlightedServiceName(serviceName)}
+              onMouseLeave={() => setHighlightedServiceName(null)}
+            >
+              <div
+                className="size-2"
+                style={{
+                  backgroundColor: colors[index % colors.length],
+                }}
+              />
+              <div>{serviceName}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TraceSheet({ trace }: { trace: Trace | null }) {
+  const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
+
+  if (!trace) {
+    return null;
+  }
+
+  const attributes: Array<TraceAttribute> = [
+    {
+      name: 'graphql.operationKind',
+      value: trace.kind,
+      category: 'GraphQL',
+    },
+    {
+      name: 'graphql.subgraphs',
+      value: trace.subgraphNames.join(', '),
+      category: 'GraphQL',
+    },
+    {
+      name: 'http.method',
+      value: trace.httpMethod,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.host',
+      value: trace.httpHost,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.route',
+      value: trace.httpRoute,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.url',
+      value: trace.httpUrl,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.status',
+      value: trace.httpStatus,
+      category: 'HTTP',
+    },
+  ];
+
+  const serviceNames = listServiceNames(rootSpan);
+
+  return (
+    <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
+      <TooltipProvider>
+        <SheetHeader className="relative border-b border-gray-800 p-4">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="text-lg font-medium text-white">
+              {trace.operationName}
+              <span className="text-muted-foreground ml-2 font-mono font-normal">
+                {trace.operationHash.substring(0, 4)}
+              </span>
+            </SheetTitle>
+          </div>
+          <SheetDescription className="mt-1 text-xs text-gray-400">
+            Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
+          </SheetDescription>
+          <div className="mt-2 flex items-center gap-3 text-xs">
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3 text-gray-400" />
+              <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
+            </div>
+            <Badge
+              variant="outline"
+              className={cn(
+                'rounded-sm border-0 px-1 font-medium uppercase',
+                trace.status === 'ok'
+                  ? 'bg-green-900/30 text-green-400'
+                  : 'bg-red-900/30 text-red-400',
+              )}
+            >
+              {trace.status}
+            </Badge>
+            <span className="font-mono uppercase text-gray-300">
+              {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
+            </span>
+          </div>
+          <Button asChild variant="outline" size="sm">
+            <Link
+              to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
+              className="absolute bottom-4 right-4"
+            >
+              <ExternalLinkIcon className="mr-1 h-3 w-3" />
+              Full Trace
+            </Link>
+          </Button>
+        </SheetHeader>
+        <div className="h-[calc(100vh-113px)]">
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
+              <WidthSyncProvider defaultWidth={251}>
+                <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
+              </WidthSyncProvider>
+            </ResizablePanel>
+            <ResizableHandle withHandle />
+            <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
+              <div className="flex h-full flex-col">
+                <div className="sticky top-0 z-10 border-b border-gray-800">
+                  <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+                    <TabButton
+                      isActive={activeView === 'attributes'}
+                      onClick={() => setActiveView('attributes')}
+                    >
+                      <div className="flex items-center gap-x-2">
+                        <div>Attributes</div>
+                        <div>
+                          <Badge
+                            variant="secondary"
+                            className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                          >
+                            7
+                          </Badge>
+                        </div>
+                      </div>
+                    </TabButton>
+                    <TabButton
+                      isActive={activeView === 'events'}
+                      onClick={() => setActiveView('events')}
+                    >
+                      <div className="flex items-center gap-x-2">
+                        <div>Events</div>
+                        <div>
+                          <Badge
+                            variant="secondary"
+                            className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                          >
+                            3
+                          </Badge>
+                        </div>
+                      </div>
+                    </TabButton>
+                    <TabButton
+                      isActive={activeView === 'operation'}
+                      onClick={() => setActiveView('operation')}
+                    >
+                      <div className="flex items-center gap-x-2">
+                        <div>Operation</div>
+                      </div>
+                    </TabButton>
+                  </div>
+                </div>
+                <ScrollArea className="relative grow">
+                  <div className="h-full">
+                    {activeView === 'attributes' ? (
+                      <div>
+                        {attributes.length > 0 ? (
+                          <div>
+                            {attributes.map((attr, index) => (
+                              <div
+                                key={index}
+                                className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
+                              >
+                                <div className="text-gray-400">{attr.name}</div>
+                                <div className="font-mono text-white">{attr.value}</div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <div className="py-4 text-center">
+                            <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                            <p className="text-xs text-gray-500">
+                              No attributes found for this trace
+                            </p>
+                          </div>
+                        )}
+                      </div>
+                    ) : null}
+                    {activeView === 'events' ? (
+                      <div className="p-4">
+                        <div className="space-y-2">
+                          {[
+                            {
+                              code: 'DB_CONNECTION_ERROR',
+                              message: 'Connection to database timed out after 5 seconds',
+                              stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
+                            },
+                            {
+                              code: 'GRAPHQL_PARSE_FAILED',
+                              message: 'Sent GraphQL Operation cannot be parsed',
+                            },
+                            {
+                              code: 'TIMEOUT_ERROR',
+                              message: 'Operation timed out after 10 seconds',
+                            },
+                          ].map((exception, index) => (
+                            <div
+                              key={index}
+                              className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
+                            >
+                              <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
+                                <span className="font-mono text-xs font-medium text-red-300">
+                                  {exception.code}
+                                </span>
+                                <Badge
+                                  variant="outline"
+                                  className="border-red-700 bg-red-950 text-[10px] text-red-300"
+                                >
+                                  Exception
+                                </Badge>
+                              </div>
+                              <div className="p-3 text-xs">
+                                <p className="text-gray-300">{exception.message}</p>
+                                {exception.stacktrace && (
+                                  <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
+                                    {exception.stacktrace}
+                                  </pre>
+                                )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : null}
+                    {activeView === 'operation' ? (
+                      <div className="absolute bottom-0 top-0 w-full">
+                        <GraphQLHighlight
+                          height={'100%'}
+                          options={{
+                            fontSize: 10,
+                            minimap: { enabled: false },
+                          }}
+                          code={fetchProductsQueryString}
+                        />
+                      </div>
+                    ) : null}
+                  </div>
+                </ScrollArea>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </TooltipProvider>
+    </SheetContent>
+  );
+}
+
+function SearchBar(props: { onFiltersOpenChange: () => void }) {
+  return null;
+
+  return (
+    <div className="flex gap-x-4">
+      <Button
+        variant="outline"
+        className="bg-background size-10 p-0"
+        onClick={props.onFiltersOpenChange}
+      >
+        <FilterIcon className="size-4" />
+      </Button>
+      <div className="relative w-full">
+        <SearchIcon className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+        <Input type="search" className="pl-9" placeholder="Search..." {...props} />
+      </div>
+    </div>
+  );
+}
+
+function TargetInsightsNewPageContent() {
+  const [filtersOpen, setFiltersOpen] = useState(true);
+
+  return (
+    <div className="py-6">
+      <SidebarProvider>
+        {filtersOpen ? (
+          <Sidebar collapsible="none" className="bg-transparent">
+            <SidebarContent>
+              <Filters />
+            </SidebarContent>
+          </Sidebar>
+        ) : null}
+        <SidebarInset className="bg-transparent">
+          <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+            <div>
+              <SearchBar onFiltersOpenChange={() => setFiltersOpen(isOpen => !isOpen)} />
+              <Traffic />
+            </div>
+            <TracesList />
+          </div>
+        </SidebarInset>
+      </SidebarProvider>
+    </div>
+  );
+}
+
+export function TargetInsightsNewPage(props: {
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+}) {
+  return (
+    <>
+      <Meta title="Insights" />
+      <TargetLayout
+        organizationSlug={props.organizationSlug}
+        projectSlug={props.projectSlug}
+        targetSlug={props.targetSlug}
+        page={Page.Insights}
+      >
+        <TargetInsightsNewPageContent />
+      </TargetLayout>
+    </>
+  );
+}
+
+function TreeIcon(props: {
+  level: number;
+  /**
+   * Decides whether or not to draw the └[]
+   */
+  hasParent: boolean;
+  /**
+   * Decides whether or not to draw
+   */
+  isLeaf: boolean;
+  /**
+   * Wheter or not to draw ├
+   */
+  isLastChild: boolean;
+  childrenCount: number;
+  isCollapsed: boolean;
+  lines: boolean[];
+  onClick?: () => void;
+}) {
+  const levelWidth = 16;
+  const base = 30;
+  const width = base + props.level * levelWidth;
+
+  const leftSideEdgeStart = (props.level - 1) * levelWidth + 12;
+  const leftSideEdgeEnd = leftSideEdgeStart + 15;
+
+  const rectLeft = 2 + props.level * levelWidth;
+
+  return (
+    <svg
+      width={width}
+      height="100%"
+      preserveAspectRatio="xMidYMid meet"
+      className="shrink"
+      onClick={props.onClick}
+    >
+      {/* left-side line */}
+      {props.hasParent ? (
+        <line x1={leftSideEdgeStart} y1="16" x2={leftSideEdgeEnd} y2="16" stroke="currentColor" />
+      ) : null}
+
+      {/* bottom line */}
+      {props.isLeaf || props.isCollapsed ? null : (
+        <line x1={rectLeft + 10} x2={rectLeft + 10} y1="16" y2="32" stroke="currentColor" />
+      )}
+
+      {/* leaf span */}
+      {props.isLeaf ? (
+        <circle cx={props.level * 16 + 12} cy="16" r="3" fill="currentColor"></circle>
+      ) : (
+        // number block
+        <>
+          <rect
+            x={rectLeft}
+            y="8"
+            width="20"
+            height="16"
+            rx="3px"
+            ry="3px"
+            fill={props.isCollapsed ? 'currentColor' : 'black'}
+            stroke="currentColor"
+          />
+          <text
+            x={rectLeft + 10}
+            y="20"
+            style={{ fontSize: 10 }}
+            textAnchor="middle"
+            fontWeight={props.isCollapsed ? 700 : 500}
+            fill={props.isCollapsed ? 'white' : 'currentColor'}
+          >
+            {props.childrenCount}
+          </text>
+        </>
+      )}
+
+      {/* this line is the vertical line (for each parent groups) */}
+      {props.lines.map((line, index) =>
+        line ? (
+          <line
+            x1={16 * (index + 1) - 4}
+            x2={16 * (index + 1) - 4}
+            y1="0"
+            y2={index === props.level - 1 && props.isLastChild ? 16 : 32}
+            stroke="currentColor"
+          />
+        ) : null,
+      )}
+    </svg>
+  );
+}
+
+function TabButton(props: { isActive: boolean; onClick(): void; children: ReactNode }) {
+  return (
+    <button
+      className={cn(
+        'border-b-2 px-2 py-2',
+        props.isActive ? 'border-[#2662d8]' : 'hover:border-border border-transparent',
+      )}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </button>
+  );
+}
+
+function TraceResize() {
+  const [width, setWidth] = useWidthSync();
+  const [isDragging, setIsDragging] = useState(false);
+  const handleRef = useRef<HTMLDivElement>(null);
+  const startPosRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const minWidth = 175;
+  const maxWidth = 450;
+
+  // Handle the start of dragging
+  const handleDragStart = useCallback(
+    (clientX: number) => {
+      setIsDragging(true);
+      startPosRef.current = clientX;
+      startWidthRef.current = width;
+
+      // Prevent text selection during drag
+      document.body.style.userSelect = 'none';
+    },
+    [width],
+  );
+
+  // Handle dragging
+  const handleDrag = useCallback(
+    (clientX: number) => {
+      if (!isDragging) return;
+      const delta = clientX - startPosRef.current;
+      let newWidth = startWidthRef.current + delta;
+      // Constrain to min/max
+      newWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);
+      setWidth(newWidth);
+    },
+    [isDragging, minWidth, maxWidth, setWidth],
+  );
+
+  // Handle the end of dragging
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = '';
+  }, []);
+
+  // Pointer event handlers
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      // Set pointer capture on the drag handle element
+      if (handleRef.current) {
+        handleRef.current.setPointerCapture(e.pointerId);
+      }
+      handleDragStart(e.clientX);
+    },
+    [handleDragStart],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      handleDrag(e.clientX);
+    },
+    [isDragging, handleDrag],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      // Release pointer capture
+      if (handleRef.current) {
+        handleRef.current.releasePointerCapture(e.pointerId);
+      }
+      handleDragEnd();
+    },
+    [handleDragEnd],
+  );
+
+  return (
+    <div
+      className="absolute bottom-0 top-0 z-20 w-[5px] cursor-ew-resize"
+      style={{ left: width - 2 }} // Position 2px to the left of the center
+      ref={handleRef}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      {/* Invisible wider hit area */}
+      <div
+        className={cn(
+          'absolute inset-y-0 left-[2px] w-px bg-gray-800',
+          isDragging ? 'bg-gray-600' : 'hover:bg-gray-700',
+        )}
+      />
+    </div>
+  );
+}
+
+function TraceTree(props: {
+  highlightedServiceName: string | null;
+  rootSpan: SpanProps;
+  leftPanelWidth: number;
+}) {
+  const [width] = useWidthSync();
+  const serviceNames = listServiceNames(props.rootSpan);
+  const serviceNameToColorMap = Object.fromEntries(
+    serviceNames.map((name, index) => [name, colors[index % colors.length]]),
+  );
+
+  return (
+    <div className="relative">
+      <TraceResize />
+      <Node
+        key={props.rootSpan.id}
+        level={0}
+        highlightedServiceName={props.highlightedServiceName}
+        totalDuration={rootSpan.duration}
+        leftPanelWidth={width}
+        span={props.rootSpan}
+        parentSpan={null}
+        groupLines={[]}
+        parentColor={null}
+        color={colors[0]}
+        serviceNameToColorMap={serviceNameToColorMap}
+      />
+    </div>
+  );
+}
+
+type SpanProps = {
+  id: string;
+  title: string;
+  serviceName?: string;
+  duration: number;
+  startedAt: number;
+  children: SpanProps[];
+};
+
+type NodeProps = {
+  highlightedServiceName: string | null;
+  level: number;
+  totalDuration: number;
+  leftPanelWidth: number;
+  span: SpanProps;
+  parentSpan: SpanProps | null;
+  groupLines: boolean[];
+  color: string;
+  parentColor: string | null;
+  serviceNameToColorMap: Record<string, string>;
+};
+
+function countChildren(spans: SpanProps[]): number {
+  return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
+}
+
+function _listServiceNames(span: SpanProps, serviceNames: string[]) {
+  if (span.serviceName && !serviceNames.includes(span.serviceName)) {
+    serviceNames.push(span.serviceName);
+  }
+
+  for (const child of span.children) {
+    _listServiceNames(child, serviceNames);
+  }
+}
+
+function listServiceNames(span: SpanProps): string[] {
+  const serviceNames: string[] = [];
+  _listServiceNames(span, serviceNames);
+  return serviceNames;
+}
+
+const colors = [
+  '#2662d8',
+  '#2eb88a',
+  '#e88d30',
+  '#af56db',
+  '#7BA4F9',
+  '#D8B5FF',
+  '#64748B',
+  '#6C5CE7',
+  '#F27059',
+  '#2D9D78',
+];
+function Node(props: NodeProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const leftPositionPercentage = roundFloatToTwoDecimals(
+    (props.span.startedAt / props.totalDuration) * 100,
+  );
+  const widthPercentage = roundFloatToTwoDecimals(
+    (props.span.duration / props.totalDuration) * 100,
+  );
+
+  const isNearRightEdge = leftPositionPercentage + widthPercentage > 85;
+  const isDimmed =
+    typeof props.highlightedServiceName === 'string' &&
+    props.highlightedServiceName !== props.span.serviceName;
+
+  const isLastChild =
+    props.parentSpan?.children[props.parentSpan.children.length - 1].id === props.span.id;
+
+  const childrenCount = collapsed
+    ? countChildren(props.span.children) + 1
+    : props.span.children.length;
+  const canBeCollapsed = props.span.children.length > 0;
+
+  const color = props.color;
+  const parentColor = props.parentColor ?? color;
+
+  const percentageOfTotal = ((props.span.duration / props.totalDuration) * 100).toFixed(2);
+  const percentageOfParent = props.parentSpan
+    ? ((props.span.duration / props.parentSpan.duration) * 100).toFixed(2)
+    : null;
+
+  return (
+    <>
+      <div className="cursor-pointer pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
+        <div className="relative flex h-8 w-full items-center overflow-hidden">
+          <div
+            className="relative flex h-8 shrink-0 items-center gap-x-2 overflow-hidden pl-1"
+            style={{ width: `${props.leftPanelWidth}px` }}
+          >
+            <div className="flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500">
+              <TreeIcon
+                key={`tree-icon-${props.span.id}`}
+                isLeaf={props.span.children.length === 0}
+                isLastChild={isLastChild}
+                childrenCount={childrenCount}
+                hasParent={!!props.parentSpan}
+                level={props.level}
+                lines={props.groupLines}
+                isCollapsed={collapsed}
+                onClick={canBeCollapsed ? () => setCollapsed(collapsed => !collapsed) : undefined}
+              />
+            </div>
+            <div
+              className={cn('whitespace-nowrap text-xs', isDimmed ? 'text-gray-500' : 'text-white')}
+            >
+              {props.span.title}
+            </div>
+            {props.span.serviceName ? (
+              <div
+                className={cn(
+                  'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs',
+                  isDimmed ? 'text-gray-600' : 'text-gray-500',
+                )}
+              >
+                {props.span.serviceName}
+              </div>
+            ) : null}
+          </div>
+          <div
+            className={cn(
+              'relative flex h-full grow items-center overflow-hidden',
+              isDimmed ? 'opacity-25' : '',
+            )}
+          >
+            <Tooltip disableHoverableContent delayDuration={100}>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn('absolute block h-6 min-w-[1px] select-none rounded-sm')}
+                  style={{
+                    left: `min(${leftPositionPercentage}%, 100% - 1px)`,
+                    width: `${widthPercentage}%`,
+                    backgroundColor: color,
+                  }}
+                >
+                  <div
+                    className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
+                    style={{
+                      fontSize: '11px',
+                      ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+                    }}
+                  >
+                    {props.span.duration}ms
+                  </div>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
+              >
+                {/* Content */}
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-y-2">
+                    <div className="text-gray-400">Duration</div>
+                    <div className="text-right font-mono">
+                      <span>{props.span.duration}ms</span>
+                    </div>
+
+                    <div className="text-gray-400">Started At</div>
+                    <div className="text-right font-mono">{props.span.startedAt}ms</div>
+
+                    <div className="text-gray-400">% of Total</div>
+                    <div className="text-right font-mono">{percentageOfTotal}%</div>
+
+                    <div className="col-span-2">
+                      {/* Timeline visualization */}
+                      <div>
+                        <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                          <div
+                            className="h-full"
+                            style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    {percentageOfParent === null ? null : (
+                      <>
+                        <div className="text-gray-400">% of Parent</div>
+                        <div className="text-right font-mono">{percentageOfParent}%</div>
+
+                        <div className="col-span-2">
+                          {/* Timeline visualization */}
+                          <div>
+                            <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                              <div
+                                className="h-full"
+                                style={{
+                                  width: `${percentageOfParent}%`,
+                                  backgroundColor: parentColor,
+                                }}
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+      {collapsed
+        ? null
+        : props.span.children.length
+          ? props.span.children.map(childSpan => {
+              const span = {
+                ...childSpan,
+                // if the child span doesn't have a serviceName, use the parent's serviceName
+                serviceName: childSpan.serviceName ?? props.span.serviceName,
+              };
+
+              return (
+                <Node
+                  key={span.id}
+                  highlightedServiceName={props.highlightedServiceName}
+                  leftPanelWidth={props.leftPanelWidth}
+                  totalDuration={props.totalDuration}
+                  span={span}
+                  level={props.level + 1}
+                  parentSpan={props.span}
+                  groupLines={
+                    isLastChild
+                      ? // remove the last line if it's the last span from the group
+                        props.groupLines.slice(0, -1).concat(false, true)
+                      : props.groupLines.concat(true)
+                  }
+                  parentColor={color}
+                  color={span.serviceName ? props.serviceNameToColorMap[span.serviceName] : color}
+                  serviceNameToColorMap={props.serviceNameToColorMap}
+                />
+              );
+            })
+          : null}
+    </>
+  );
+}
+
+function GridTable(props: {
+  rows: Array<{
+    key: string;
+    value: ReactNode;
+  }>;
+}) {
+  return (
+    <div className="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
+      {props.rows.map(row => (
+        <Fragment key={row.key}>
+          <div className="font-sans text-gray-400">{row.key}</div>
+          <div className="text-right font-mono">{row.value}</div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+function roundFloatToTwoDecimals(num: number) {
+  return Math.round(num * 100) / 100;
+}
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index e7d6d329db..8a2ff3f5f5 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -71,6 +71,8 @@ import { TargetHistoryVersionPage } from './pages/target-history-version';
 import { TargetInsightsPage } from './pages/target-insights';
 import { TargetInsightsClientPage } from './pages/target-insights-client';
 import { TargetInsightsCoordinatePage } from './pages/target-insights-coordinate';
+import { TargetInsightsNewPage } from './pages/target-insights-new';
+import { TargetInsightsNewTracePage } from './pages/target-insights-new-trace';
 import { TargetInsightsOperationPage } from './pages/target-insights-operation';
 import { TargetLaboratoryPage } from './pages/target-laboratory';
 import { TargetSettingsPage, TargetSettingsPageEnum } from './pages/target-settings';
@@ -646,6 +648,36 @@ const targetInsightsRoute = createRoute({
   },
 });
 
+const targetInsightsNewRoute = createRoute({
+  getParentRoute: () => targetRoute,
+  path: 'insights-new',
+  component: function TargetInsightsNewRoute() {
+    const { organizationSlug, projectSlug, targetSlug } = targetInsightsNewRoute.useParams();
+    return (
+      <TargetInsightsNewPage
+        organizationSlug={organizationSlug}
+        projectSlug={projectSlug}
+        targetSlug={targetSlug}
+      />
+    );
+  },
+});
+
+const targetInsightsNewTraceRoute = createRoute({
+  getParentRoute: () => targetRoute,
+  path: 'insights-new/trace',
+  component: function TargetInsightsNewTraceRoute() {
+    const { organizationSlug, projectSlug, targetSlug } = targetInsightsNewTraceRoute.useParams();
+    return (
+      <TargetInsightsNewTracePage
+        organizationSlug={organizationSlug}
+        projectSlug={projectSlug}
+        targetSlug={targetSlug}
+      />
+    );
+  },
+});
+
 const targetInsightsCoordinateRoute = createRoute({
   getParentRoute: () => targetRoute,
   path: 'insights/schema-coordinate/$coordinate',
@@ -876,6 +908,8 @@ const routeTree = root.addChildren([
       targetLaboratoryRoute,
       targetHistoryRoute.addChildren([targetHistoryVersionRoute]),
       targetInsightsRoute,
+      targetInsightsNewRoute,
+      targetInsightsNewTraceRoute,
       targetInsightsCoordinateRoute,
       targetInsightsClientRoute,
       targetInsightsOperationsRoute,
diff --git a/packages/web/app/tailwind.config.ts b/packages/web/app/tailwind.config.ts
index 0256a6a5b1..d952180f9d 100644
--- a/packages/web/app/tailwind.config.ts
+++ b/packages/web/app/tailwind.config.ts
@@ -127,6 +127,16 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        sidebar: {
+          DEFAULT: 'hsl(var(--sidebar-background))',
+          foreground: 'hsl(var(--sidebar-foreground))',
+          primary: 'hsl(var(--sidebar-primary))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          accent: 'hsl(var(--sidebar-accent))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          border: 'hsl(var(--sidebar-border))',
+          ring: 'hsl(var(--sidebar-ring))',
+        },
       },
       borderRadius: {
         lg: 'var(--radius)',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2081547ce1..fc29e4346f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1878,6 +1878,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: 4.3.4
         version: 4.3.4(vite@7.1.5(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0))
+      '@xyflow/react':
+        specifier: 12.4.4
+        version: 12.4.4(@types/react@18.3.18)(immer@10.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       autoprefixer:
         specifier: 10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -1896,6 +1899,9 @@ importers:
       date-fns:
         specifier: 4.1.0
         version: 4.1.0
+      date-fns-tz:
+        specifier: 3.2.0
+        version: 3.2.0(date-fns@4.1.0)
       dompurify:
         specifier: 3.2.6
         version: 3.2.6
@@ -1971,6 +1977,9 @@ importers:
       react-icons:
         specifier: 5.4.0
         version: 5.4.0(react@18.3.1)
+      react-resizable-panels:
+        specifier: 2.1.7
+        version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-select:
         specifier: 5.9.0
         version: 5.9.0(@babel/core@7.26.0)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1992,6 +2001,9 @@ importers:
       react-window:
         specifier: 1.8.11
         version: 1.8.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts:
+        specifier: 2.15.1
+        version: 2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       regenerator-runtime:
         specifier: 0.14.1
         version: 0.14.1
@@ -2997,10 +3009,6 @@ packages:
     resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/template@7.25.9':
-    resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/template@7.26.9':
     resolution: {integrity: sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==}
     engines: {node: '>=6.9.0'}
@@ -8299,6 +8307,9 @@ packages:
   '@types/crypto-js@4.2.2':
     resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
 
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
   '@types/d3-array@3.2.2':
     resolution: {integrity: sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==}
 
@@ -8887,6 +8898,15 @@ packages:
     resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==}
     engines: {node: '>=14.6'}
 
+  '@xyflow/react@12.4.4':
+    resolution: {integrity: sha512-9RZ9dgKZNJOlbrXXST5HPb5TcXPOIDGondjwcjDro44OQRPl1E0ZRPTeWPGaQtVjbg4WpR4BUYwOeshNI2TuVg==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+
+  '@xyflow/system@0.0.52':
+    resolution: {integrity: sha512-pJBMaoh/GEebIABWEIxAai0yf57dm+kH7J/Br+LnLFPuJL87Fhcmm4KFWd/bCUy/kCWUg+2/yFAGY0AUHRPOnQ==}
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -9601,6 +9621,9 @@ packages:
   class-variance-authority@0.7.1:
     resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -10133,6 +10156,11 @@ packages:
   dataloader@2.2.3:
     resolution: {integrity: sha512-y2krtASINtPFS1rSDjacrFgn1dcUuoREVabwlOGOe4SdxenREqwjwjElAdwvbGM7kgZz9a3KVicWR7vcz8rnzA==}
 
+  date-fns-tz@3.2.0:
+    resolution: {integrity: sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==}
+    peerDependencies:
+      date-fns: ^3.0.0 || ^4.0.0
+
   date-fns@2.30.0:
     resolution: {integrity: sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==}
     engines: {node: '>=0.11'}
@@ -10203,6 +10231,9 @@ packages:
     resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
     engines: {node: '>=0.10.0'}
 
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
@@ -10934,6 +10965,10 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-equals@5.2.2:
+    resolution: {integrity: sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==}
+    engines: {node: '>=6.0.0'}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -14761,6 +14796,9 @@ packages:
   react-is@18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
   react-medium-image-zoom@5.3.0:
     resolution: {integrity: sha512-RCIzVlsKqy3BYgGgYbolUfuvx0aSKC7YhX/IJGEp+WJxsqdIVYJHkBdj++FAj6VD7RiWj6VVmdCfa/9vJE9hZg==}
     peerDependencies:
@@ -14811,12 +14849,24 @@ packages:
       '@types/react':
         optional: true
 
+  react-resizable-panels@2.1.7:
+    resolution: {integrity: sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==}
+    peerDependencies:
+      react: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   react-select@5.9.0:
     resolution: {integrity: sha512-nwRKGanVHGjdccsnzhFte/PULziueZxGD8LL2WojON78Mvnq7LdAMEtu2frrwld1fr3geixg3iiMBIc/LLAZpw==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-smooth@4.0.4:
+    resolution: {integrity: sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-string-replace@1.1.1:
     resolution: {integrity: sha512-26TUbLzLfHQ5jO5N7y3Mx88eeKo0Ml0UjCQuX4BMfOd/JX+enQqlKpL1CZnmjeBRvQE8TR+ds9j1rqx9CxhKHQ==}
     engines: {node: '>=0.12.0'}
@@ -14942,6 +14992,16 @@ packages:
     resolution: {integrity: sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==}
     engines: {node: '>= 4'}
 
+  recharts-scale@0.4.5:
+    resolution: {integrity: sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==}
+
+  recharts@2.15.1:
+    resolution: {integrity: sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   recma-build-jsx@1.0.0:
     resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
 
@@ -16513,6 +16573,11 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 
+  use-sync-external-store@1.4.0:
+    resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   use-sync-external-store@1.5.0:
     resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
     peerDependencies:
@@ -16608,6 +16673,9 @@ packages:
   vfile@6.0.1:
     resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}
 
+  victory-vendor@36.9.2:
+    resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
+
   vite-node@3.2.4:
     resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -17006,6 +17074,21 @@ packages:
   zrender@5.6.1:
     resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
 
+  zustand@4.5.6:
+    resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zustand@5.0.8:
     resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
     engines: {node: '>=12.20.0'}
@@ -17448,8 +17531,8 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17556,11 +17639,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.596.0':
+  '@aws-sdk/client-sso-oidc@3.596.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17599,6 +17682,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
+      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.723.0(@aws-sdk/client-sts@3.723.0)':
@@ -17732,11 +17816,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sts@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)':
+  '@aws-sdk/client-sts@3.596.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17775,7 +17859,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
-      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/client-sts@3.723.0':
@@ -17889,7 +17972,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-ini@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/credential-provider-env': 3.587.0
       '@aws-sdk/credential-provider-http': 3.596.0
       '@aws-sdk/credential-provider-process': 3.587.0
@@ -18008,7 +18091,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.587.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/types': 3.7.2
@@ -18183,7 +18266,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/shared-ini-file-loader': 3.1.12
@@ -18322,10 +18405,10 @@ snapshots:
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
       '@babel/helpers': 7.26.10
-      '@babel/parser': 7.26.3
-      '@babel/template': 7.25.9
+      '@babel/parser': 7.26.10
+      '@babel/template': 7.26.9
       '@babel/traverse': 7.26.4
-      '@babel/types': 7.26.3
+      '@babel/types': 7.26.10
       convert-source-map: 2.0.0
       debug: 4.4.1(supports-color@8.1.1)
       gensync: 1.0.0-beta.2
@@ -18635,12 +18718,6 @@ snapshots:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  '@babel/template@7.25.9':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/parser': 7.26.3
-      '@babel/types': 7.26.10
-
   '@babel/template@7.26.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -18651,7 +18728,7 @@ snapshots:
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/generator': 7.26.3
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.26.10
       '@babel/template': 7.26.9
       '@babel/types': 7.26.10
       debug: 4.4.1(supports-color@8.1.1)
@@ -21524,7 +21601,7 @@ snapshots:
       nopt: 7.2.0
       proc-log: 3.0.0
       read-package-json-fast: 3.0.2
-      semver: 7.6.3
+      semver: 7.7.2
       walk-up-path: 3.0.1
 
   '@npmcli/fs@3.1.0':
@@ -21539,7 +21616,7 @@ snapshots:
       proc-log: 3.0.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.6.3
+      semver: 7.7.2
       which: 4.0.0
     transitivePeerDependencies:
       - bluebird
@@ -25772,8 +25849,8 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.26.3
-      '@babel/types': 7.26.3
+      '@babel/parser': 7.26.10
+      '@babel/types': 7.26.10
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
       '@types/babel__traverse': 7.18.3
@@ -25784,7 +25861,7 @@ snapshots:
 
   '@types/babel__template@7.4.1':
     dependencies:
-      '@babel/parser': 7.26.3
+      '@babel/parser': 7.26.10
       '@babel/types': 7.26.10
 
   '@types/babel__traverse@7.18.3':
@@ -25841,6 +25918,8 @@ snapshots:
 
   '@types/crypto-js@4.2.2': {}
 
+  '@types/d3-array@3.2.1': {}
+
   '@types/d3-array@3.2.2': {}
 
   '@types/d3-axis@3.0.6':
@@ -26312,7 +26391,7 @@ snapshots:
       globby: 11.1.0
       is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.6.3
+      semver: 7.7.2
       ts-api-utils: 1.3.0(typescript@5.7.3)
     optionalDependencies:
       typescript: 5.7.3
@@ -26557,6 +26636,27 @@ snapshots:
 
   '@xmldom/xmldom@0.9.8': {}
 
+  '@xyflow/react@12.4.4(@types/react@18.3.18)(immer@10.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@xyflow/system': 0.0.52
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.6(@types/react@18.3.18)(immer@10.1.3)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
+  '@xyflow/system@0.0.52':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   abbrev@1.1.1: {}
 
   abbrev@2.0.0: {}
@@ -27398,6 +27498,8 @@ snapshots:
     dependencies:
       clsx: 2.1.1
 
+  classcat@5.0.5: {}
+
   clean-regexp@1.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -27981,6 +28083,10 @@ snapshots:
 
   dataloader@2.2.3: {}
 
+  date-fns-tz@3.2.0(date-fns@4.1.0):
+    dependencies:
+      date-fns: 4.1.0
+
   date-fns@2.30.0:
     dependencies:
       '@babel/runtime': 7.26.10
@@ -28025,6 +28131,8 @@ snapshots:
 
   decamelize@1.2.0: {}
 
+  decimal.js-light@2.5.1: {}
+
   decode-named-character-reference@1.0.2:
     dependencies:
       character-entities: 2.0.2
@@ -29008,6 +29116,8 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-equals@5.2.2: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -30747,7 +30857,7 @@ snapshots:
       acorn: 8.14.0
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      semver: 7.6.3
+      semver: 7.7.2
 
   jsonfile@4.0.0:
     optionalDependencies:
@@ -30772,7 +30882,7 @@ snapshots:
       lodash.isstring: 4.0.1
       lodash.once: 4.1.1
       ms: 2.1.3
-      semver: 7.6.3
+      semver: 7.7.2
 
   jsox@1.2.119: {}
 
@@ -32481,7 +32591,7 @@ snapshots:
       make-fetch-happen: 13.0.0
       nopt: 7.2.0
       proc-log: 3.0.0
-      semver: 7.6.3
+      semver: 7.7.2
       tar: 6.2.1
       which: 4.0.0
     transitivePeerDependencies:
@@ -33611,6 +33721,8 @@ snapshots:
 
   react-is@18.2.0: {}
 
+  react-is@18.3.1: {}
+
   react-medium-image-zoom@5.3.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       react: 19.0.0
@@ -33662,6 +33774,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.18
 
+  react-resizable-panels@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-select@5.9.0(@babel/core@7.26.0)(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.26.10
@@ -33680,6 +33797,14 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  react-smooth@4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      fast-equals: 5.2.2
+      prop-types: 15.8.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+
   react-string-replace@1.1.1: {}
 
   react-style-singleton@2.2.3(@types/react@18.3.18)(react@18.3.1):
@@ -33825,6 +33950,23 @@ snapshots:
       tiny-invariant: 1.3.3
       tslib: 2.8.1
 
+  recharts-scale@0.4.5:
+    dependencies:
+      decimal.js-light: 2.5.1
+
+  recharts@2.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      clsx: 2.1.1
+      eventemitter3: 4.0.7
+      lodash: 4.17.21
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-is: 18.3.1
+      react-smooth: 4.0.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      recharts-scale: 0.4.5
+      tiny-invariant: 1.3.3
+      victory-vendor: 36.9.2
+
   recma-build-jsx@1.0.0:
     dependencies:
       '@types/estree': 1.0.8
@@ -35711,6 +35853,10 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  use-sync-external-store@1.4.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   use-sync-external-store@1.5.0(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -35818,6 +35964,23 @@ snapshots:
       unist-util-stringify-position: 4.0.0
       vfile-message: 4.0.2
 
+  victory-vendor@36.9.2:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
   vite-node@3.2.4(@types/node@22.10.5)(jiti@2.3.3)(less@4.2.0)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.5.0):
     dependencies:
       cac: 6.7.14
@@ -36256,6 +36419,14 @@ snapshots:
     dependencies:
       tslib: 2.3.0
 
+  zustand@4.5.6(@types/react@18.3.18)(immer@10.1.3)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.4.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+      immer: 10.1.3
+      react: 18.3.1
+
   zustand@5.0.8(@types/react@18.3.18)(immer@10.1.3)(react@19.0.0)(use-sync-external-store@1.5.0(react@19.0.0)):
     optionalDependencies:
       '@types/react': 18.3.18
diff --git a/tracing/notes.md b/tracing/notes.md
new file mode 100644
index 0000000000..14418697e9
--- /dev/null
+++ b/tracing/notes.md
@@ -0,0 +1,14 @@
+We want to:
+- show incoming graphql requests
+- show subgraph calls
+- track parse / validation / planning steps as well
+- annotate graphql requests with a list of subgraph names (so we can show operations that a subgraph is involved with)
+- show performance of subgraph calls (latency, error rate - globally)
+- capture errors in subgraph calls
+- identify traces by client name and version
+- attach http status
+- attach http method
+- attach http url
+- attach custom attributes (like user id, header values, etc)
+- attach query plan cache hit/miss
+- attach queries
diff --git a/tracing/signoz.md b/tracing/signoz.md
new file mode 100644
index 0000000000..b52f3d953c
--- /dev/null
+++ b/tracing/signoz.md
@@ -0,0 +1,39 @@
+```
+┌─name───────────────────────────────────────────┐
+ 1.  │ signoz_traces.dependency_graph_minutes_db_calls_mv_v2        │
+ 2.  │ signoz_traces.dependency_graph_minutes_messaging_calls_mv_v2 │
+ 3.  │ signoz_traces.dependency_graph_minutes_service_calls_mv_v2   │
+ 4.  │ signoz_traces.dependency_graph_minutes_v2                    │
+ 5.  │ signoz_traces.distributed_dependency_graph_minutes_v2        │
+ 6.  │ signoz_traces.distributed_schema_migrations_v2               │
+ 7.  │ signoz_traces.distributed_signoz_error_index_v2              │
+ 8.  │ signoz_traces.distributed_signoz_index_v2                    │
+ 9.  │ signoz_traces.distributed_signoz_index_v3                    │
+ 10. │ signoz_traces.distributed_signoz_spans                       │
+ 11. │ signoz_traces.distributed_span_attributes                    │
+ 12. │ signoz_traces.distributed_span_attributes_keys               │
+ 13. │ signoz_traces.distributed_tag_attributes_v2                  │
+ 14. │ signoz_traces.distributed_top_level_operations               │
+ 15. │ signoz_traces.distributed_trace_summary                      │
+ 16. │ signoz_traces.distributed_traces_v3_resource                 │
+ 17. │ signoz_traces.distributed_usage                              │
+ 18. │ signoz_traces.distributed_usage_explorer                     │
+ 19. │ signoz_traces.durationSort                                   │
+ 20. │ signoz_traces.root_operations                                │
+ 21. │ signoz_traces.schema_migrations_v2                           │
+ 22. │ signoz_traces.signoz_error_index_v2                          │
+ 23. │ signoz_traces.signoz_index_v2                                │
+ 24. │ signoz_traces.signoz_index_v3                                │
+ 25. │ signoz_traces.signoz_spans                                   │
+ 26. │ signoz_traces.span_attributes                                │
+ 27. │ signoz_traces.span_attributes_keys                           │
+ 28. │ signoz_traces.sub_root_operations                            │
+ 29. │ signoz_traces.tag_attributes_v2                              │
+ 30. │ signoz_traces.top_level_operations                           │
+ 31. │ signoz_traces.trace_summary                                  │
+ 32. │ signoz_traces.trace_summary_mv                               │
+ 33. │ signoz_traces.traces_v3_resource                             │
+ 34. │ signoz_traces.usage                                          │
+ 35. │ signoz_traces.usage_explorer                                 │
+ 36. │ signoz_traces.usage_explorer_mv                              │
+```
diff --git a/tracing/uptrace.md b/tracing/uptrace.md
new file mode 100644
index 0000000000..b040d278b3
--- /dev/null
+++ b/tracing/uptrace.md
@@ -0,0 +1,17 @@
+```
+uptrace.ch_migration_locks
+uptrace.ch_migrations
+uptrace.datapoint_hours
+uptrace.datapoint_hours_mv
+uptrace.datapoint_minutes
+uptrace.datapoint_minutes_buffer
+uptrace.metrics_uptrace_service_graph_client_duration_mv
+uptrace.metrics_uptrace_service_graph_failed_requests_mv
+uptrace.metrics_uptrace_service_graph_server_duration_mv
+uptrace.service_graph_edges
+uptrace.service_graph_edges_buffer
+uptrace.spans_data
+uptrace.spans_data_buffer
+uptrace.spans_index
+uptrace.spans_index_buffer
+```

From 75d4847c79d3b15ab725d3a585ef4bc4b208baf3 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Thu, 20 Mar 2025 10:54:33 +0100
Subject: [PATCH 002/123] /auth-otel

---
 docker/configs/otel-collector/Dockerfile      |  31 ----
 docker/docker-compose.dev.yml                 |   4 +-
 docker/docker.hcl                             |   4 +-
 docker/otel-collector.dockerfile              |   6 +-
 packages/services/server/src/index.ts         |   2 +-
 .../services/server/src/otel-auth-endpoint.ts | 139 +++++++++++++++---
 6 files changed, 129 insertions(+), 57 deletions(-)
 delete mode 100644 docker/configs/otel-collector/Dockerfile

diff --git a/docker/configs/otel-collector/Dockerfile b/docker/configs/otel-collector/Dockerfile
deleted file mode 100644
index 5df59e115e..0000000000
--- a/docker/configs/otel-collector/Dockerfile
+++ /dev/null
@@ -1,31 +0,0 @@
-FROM scratch AS config
-
-COPY builder-config.yaml .
-
-FROM golang:1.23.7-bookworm AS builder
-
-ARG OTEL_VERSION=0.122.0
-
-WORKDIR /build
-
-RUN go install go.opentelemetry.io/collector/cmd/builder@v${OTEL_VERSION}
-
-# Copy the manifest file and other necessary files
-COPY --from=config builder-config.yaml .
-
-# Build the custom collector
-RUN CGO_ENABLED=0 builder --config=/build/builder-config.yaml
-
-# Stage 2: Final Image
-FROM alpine:3.14
-
-WORKDIR /app
-
-# Copy the generated collector binary from the builder stage
-COPY --from=builder /build/otelcol-custom .
-
-# Expose necessary ports
-EXPOSE 4317/tcp 4318/tcp 13133/tcp
-
-# Set the default command
-CMD ["./otelcol-custom", "--config=/etc/otel-config.yaml"]
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index fbacfcc4ff..d02d0cdc83 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -183,7 +183,9 @@ services:
         condition: service_healthy
     build:
       context: ./configs/otel-collector
-      dockerfile: Dockerfile
+      dockerfile: ../otel-collector.dockerfile
+    environment:
+      HIVE_OTEL_AUTH_ENDPOINT: 'http://host.docker.internal:3001/otel-auth'
     volumes:
       - ./configs/otel-collector/builder-config.yaml:/builder-config.yaml
       - ./configs/otel-collector/config.yaml:/etc/otel-config.yaml
diff --git a/docker/docker.hcl b/docker/docker.hcl
index 4e9e421965..d79a10f614 100644
--- a/docker/docker.hcl
+++ b/docker/docker.hcl
@@ -379,9 +379,7 @@ target "apollo-router" {
 
 target "otel-collector" {
   inherits = ["otel-collector-base", get_target()]
-  contexts = {
-    config = "${PWD}/docker/configs/otel-collector"
-  }
+  context = "${PWD}/docker/configs/otel-collector"
   args = {
     IMAGE_TITLE = "graphql-hive/otel-collector"
     IMAGE_DESCRIPTION = "OTEL Collector for GraphQL Hive."
diff --git a/docker/otel-collector.dockerfile b/docker/otel-collector.dockerfile
index 6bbe6b48bd..5df59e115e 100644
--- a/docker/otel-collector.dockerfile
+++ b/docker/otel-collector.dockerfile
@@ -1,3 +1,7 @@
+FROM scratch AS config
+
+COPY builder-config.yaml .
+
 FROM golang:1.23.7-bookworm AS builder
 
 ARG OTEL_VERSION=0.122.0
@@ -10,7 +14,7 @@ RUN go install go.opentelemetry.io/collector/cmd/builder@v${OTEL_VERSION}
 COPY --from=config builder-config.yaml .
 
 # Build the custom collector
-RUN builder --config=/build/builder-config.yaml
+RUN CGO_ENABLED=0 builder --config=/build/builder-config.yaml
 
 # Stage 2: Final Image
 FROM alpine:3.14
diff --git a/packages/services/server/src/index.ts b/packages/services/server/src/index.ts
index f9efcdca60..c1caf21fa6 100644
--- a/packages/services/server/src/index.ts
+++ b/packages/services/server/src/index.ts
@@ -593,7 +593,7 @@ export async function main() {
       return;
     });
 
-    createOtelAuthEndpoint(server);
+    createOtelAuthEndpoint({ server, authN, redis, pgPool: storage.pool, tracing: !!tracing });
 
     if (env.cdn.providers.api !== null) {
       const s3 = {
diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
index ed477ade11..5c4ac16cf9 100644
--- a/packages/services/server/src/otel-auth-endpoint.ts
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -1,28 +1,127 @@
 import type { FastifyInstance } from 'fastify';
+import type Redis from 'ioredis';
+import type { DatabasePool } from 'slonik';
+import type { AuthN } from '@hive/api/modules/auth/lib/authz';
+import { PrometheusConfig } from '@hive/api/modules/shared/providers/prometheus-config';
+import { TargetsByIdCache } from '@hive/api/modules/target/providers/targets-by-id-cache';
+import { TargetsBySlugCache } from '@hive/api/modules/target/providers/targets-by-slug-cache';
+import { isUUID } from '@hive/api/shared/is-uuid';
 
-export function createOtelAuthEndpoint(server: FastifyInstance) {
-  server.get('/otel-auth', (req, res) => {
-    const authHeader = req.headers.authorization;
+export function createOtelAuthEndpoint(args: {
+  server: FastifyInstance;
+  tracing: boolean;
+  authN: AuthN;
+  redis: Redis;
+  pgPool: DatabasePool;
+}) {
+  const prometheusConfig = new PrometheusConfig(args.tracing);
+  const targetsByIdCache = new TargetsByIdCache(args.redis, args.pgPool, prometheusConfig);
+  const targetsBySlugCache = new TargetsBySlugCache(args.redis, args.pgPool, prometheusConfig);
+
+  args.server.get('/otel-auth', async (req, reply) => {
     const targetRefHeader = req.headers['x-hive-target-ref'];
-    req.log.info('request! ' + authHeader);
-
-    if (authHeader === 'Bearer 123') {
-      if (targetRefHeader !== 'target-1') {
-        // No access to target-1
-        res.status(403).send({
-          message: 'Forbidden access to the target',
-        });
-        return;
-      }
-
-      res.status(200).send({
-        message: 'Authenticated',
-        targetId: targetRefHeader,
+
+    const targetRefRaw = Array.isArray(targetRefHeader) ? targetRefHeader[0] : targetRefHeader;
+
+    if (typeof targetRefRaw !== 'string' || targetRefRaw.trim().length === 0) {
+      await reply.status(400).send({
+        message: `Missing required header: 'X-Hive-Target-Ref'. Please provide a valid target reference in the request headers.`,
+      });
+      return;
+    }
+
+    const targetRefParseResult = parseTargetRef(targetRefRaw);
+
+    if (!targetRefParseResult.ok) {
+      await reply.status(400).send({
+        message: targetRefParseResult.error,
+      });
+      return;
+    }
+
+    const targetRef = targetRefParseResult.data;
+
+    const session = await args.authN.authenticate({ req, reply });
+
+    const target = await (targetRef.kind === 'id'
+      ? targetsByIdCache.get(targetRef.targetId)
+      : targetsBySlugCache.get(targetRef));
+
+    if (!target) {
+      await reply.status(404).send({
+        message: `The specified target does not exist. Verify the target reference and try again.`,
       });
-    } else {
-      res.status(401).send({
-        message: 'Unauthorized',
+      return;
+    }
+
+    const canReportUsage = await session.canPerformAction({
+      organizationId: target.orgId,
+      action: 'usage:report', // TODO: define a new action for tracing
+      params: {
+        organizationId: target.orgId,
+        projectId: target.projectId,
+        targetId: target.id,
+      },
+    });
+
+    if (!canReportUsage) {
+      await reply.status(403).send({
+        message: `You do not have permission to send traces for this target.`,
       });
+      return;
     }
+
+    await reply.status(200).send({
+      message: 'Authenticated',
+      targetId: target.id,
+    });
+    return;
   });
 }
+
+// TODO: https://github.com/open-telemetry/opentelemetry-collector/blob/ae0b83b94cc4d4cd90a73a2f390d23c25f848aec/config/confighttp/confighttp.go#L551C4-L551C84
+//       swallows the error and returns 401 Unauthorized to the OTel SDK.
+const invalidTaretRefError =
+  'Invalid slug or ID provided for target reference. ' +
+  'Must match target slug "$organization_slug/$project_slug/$target_slug" (e.g. "the-guild/graphql-hive/staging") ' +
+  'or UUID (e.g. c8164307-0b42-473e-a8c5-2860bb4beff6).';
+
+function parseTargetRef(targetRef: string) {
+  if (targetRef.includes('/')) {
+    const parts = targetRef.split('/');
+
+    if (parts.length !== 3) {
+      return {
+        ok: false,
+        error: invalidTaretRefError,
+      } as const;
+    }
+
+    const [organizationSlug, projectSlug, targetSlug] = parts;
+
+    return {
+      ok: true,
+      data: {
+        kind: 'slugs',
+        organizationSlug,
+        projectSlug,
+        targetSlug,
+      },
+    } as const;
+  }
+
+  if (!isUUID(targetRef)) {
+    return {
+      ok: false,
+      error: invalidTaretRefError,
+    } as const;
+  }
+
+  return {
+    ok: true,
+    data: {
+      kind: 'id',
+      targetId: targetRef,
+    },
+  } as const;
+}

From 637b99b5d8d6e400c3274ca5e0739ac4c229fac7 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 21 Mar 2025 10:06:20 +0100
Subject: [PATCH 003/123] perf

---
 .../src/pages/target-insights-new-filter.tsx  |  326 +--
 .../src/pages/target-insights-new-trace.tsx   | 1748 +++++++++++------
 .../web/app/src/pages/target-insights-new.tsx | 1374 +++++++------
 3 files changed, 2170 insertions(+), 1278 deletions(-)

diff --git a/packages/web/app/src/pages/target-insights-new-filter.tsx b/packages/web/app/src/pages/target-insights-new-filter.tsx
index 7912c03c0c..fbc1d0fcb3 100644
--- a/packages/web/app/src/pages/target-insights-new-filter.tsx
+++ b/packages/web/app/src/pages/target-insights-new-filter.tsx
@@ -4,6 +4,7 @@ import {
   forwardRef,
   Fragment,
   InputHTMLAttributes,
+  memo,
   ReactNode,
   useCallback,
   useMemo,
@@ -13,7 +14,6 @@ import { addDays, formatDate } from 'date-fns';
 import {
   CalendarIcon,
   CheckIcon,
-  ChevronRight,
   ChevronRightIcon,
   CircleXIcon,
   MinusIcon,
@@ -88,22 +88,27 @@ export function FilterTitle(props: { children: ReactNode; changes?: number; onRe
       className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
     >
       <CollapsibleTrigger>
-        <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-        {props.children}
-        {props.changes ? (
-          <Button
-            variant="secondary"
-            size="sm"
-            className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
-            onClick={e => {
-              e.preventDefault();
-              props.onReset();
-            }}
-          >
-            <CircleXIcon className="hidden size-3 group-hover:block" />
-            <span className="block group-hover:hidden">{props.changes}</span>
-          </Button>
-        ) : null}
+        <>
+          <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+          {props.children}
+          {props.changes ? (
+            <Button
+              variant="secondary"
+              size="sm"
+              className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
+              onClick={e => {
+                e.preventDefault();
+                props.onReset();
+              }}
+              asChild
+            >
+              <>
+                <CircleXIcon className="hidden size-3 group-hover:block" />
+                <span className="block group-hover:hidden">{props.changes}</span>
+              </>
+            </Button>
+          ) : null}
+        </>
       </CollapsibleTrigger>
     </SidebarGroupLabel>
   );
@@ -119,89 +124,91 @@ export function FilterContent(props: { children: ReactNode }) {
   );
 }
 
-export function MultiInputFilter(props: {
-  name: string;
-  /**
-   * Filter's key for the backend and url state
-   */
-  key: string;
-  selectedValues: string[];
-  onChange(selectedValues: string[]): void;
-}) {
-  const [traceId, setTraceId] = useState('');
-  const handleTraceIdChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setTraceId(e.target.value);
-    },
-    [setTraceId],
-  );
+export const MultiInputFilter = memo(
+  (props: {
+    name: string;
+    /**
+     * Filter's key for the backend and url state
+     */
+    key: string;
+    selectedValues: string[];
+    onChange(selectedValues: string[]): void;
+  }) => {
+    const [traceId, setTraceId] = useState('');
+    const handleTraceIdChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTraceId(e.target.value);
+      },
+      [setTraceId],
+    );
 
-  const addTraceId = useCallback(() => {
-    if (!traceId) {
-      return;
-    }
+    const addTraceId = useCallback(() => {
+      if (!traceId) {
+        return;
+      }
 
-    if (!props.selectedValues.includes(traceId)) {
-      props.onChange(props.selectedValues.concat(traceId));
-    }
+      if (!props.selectedValues.includes(traceId)) {
+        props.onChange(props.selectedValues.concat(traceId));
+      }
 
-    setTraceId('');
-  }, [traceId, setTraceId]);
+      setTraceId('');
+    }, [traceId, setTraceId]);
 
-  return (
-    <Filter name={props.name}>
-      <FilterTitle
-        changes={props.selectedValues.length}
-        children={props.name}
-        onReset={() => props.onChange([])}
-      />
-      <FilterContent>
-        <form
-          className="mt-4 flex w-full max-w-sm items-center space-x-2"
-          onSubmit={e => {
-            e.preventDefault();
-            addTraceId();
-          }}
-        >
-          <FilterInput
-            type="text"
-            placeholder="Trace ID..."
-            value={traceId}
-            onChange={handleTraceIdChange}
-          />
-          <Button
-            variant="secondary"
-            className="h-9 w-9 p-0"
-            type="submit"
-            onClick={() => {
+    return (
+      <Filter name={props.name}>
+        <FilterTitle
+          changes={props.selectedValues.length}
+          children={props.name}
+          onReset={() => props.onChange([])}
+        />
+        <FilterContent>
+          <form
+            className="mt-4 flex w-full max-w-sm items-center space-x-2"
+            onSubmit={e => {
+              e.preventDefault();
               addTraceId();
             }}
           >
-            <PlusIcon className="size-4" />
-          </Button>
-        </form>
-        {props.selectedValues.map(value => (
-          <SidebarMenuButton
-            key={value}
-            onClick={() => props.onChange(props.selectedValues.filter(val => val !== value))}
-            className="group/trace-id hover:bg-sidebar-accent/50"
-          >
-            <div
-              data-active
-              className="text-sidebar-primary-foreground border-sidebar-primary bg-sidebar-primary group-hover/trace-id:border-sidebar-border flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border group-hover/trace-id:bg-transparent"
+            <FilterInput
+              type="text"
+              placeholder="Trace ID..."
+              value={traceId}
+              onChange={handleTraceIdChange}
+            />
+            <Button
+              variant="secondary"
+              className="h-9 w-9 p-0"
+              type="submit"
+              onClick={() => {
+                addTraceId();
+              }}
             >
-              <CheckIcon className="block size-3 group-hover/trace-id:hidden" />
-              <MinusIcon className="hidden size-3 group-hover/trace-id:block" />
-            </div>
-            {value}
-          </SidebarMenuButton>
-        ))}
-      </FilterContent>
-    </Filter>
-  );
-}
+              <PlusIcon className="size-4" />
+            </Button>
+          </form>
+          {props.selectedValues.map(value => (
+            <SidebarMenuButton
+              key={value}
+              onClick={() => props.onChange(props.selectedValues.filter(val => val !== value))}
+              className="group/trace-id hover:bg-sidebar-accent/50"
+            >
+              <div
+                data-active
+                className="text-sidebar-primary-foreground border-sidebar-primary bg-sidebar-primary group-hover/trace-id:border-sidebar-border flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border group-hover/trace-id:bg-transparent"
+              >
+                <CheckIcon className="block size-3 group-hover/trace-id:hidden" />
+                <MinusIcon className="hidden size-3 group-hover/trace-id:block" />
+              </div>
+              {value}
+            </SidebarMenuButton>
+          ))}
+        </FilterContent>
+      </Filter>
+    );
+  },
+);
 
-export function MultiSelectFilter<$Value>(props: {
+export const MultiSelectFilter = memo(function <$Value>(props: {
   name: string;
   /**
    * Filter's key for the backend and url state
@@ -270,7 +277,7 @@ export function MultiSelectFilter<$Value>(props: {
       </FilterContent>
     </Filter>
   );
-}
+});
 
 function FilterOption(props: {
   onClick(): void;
@@ -333,81 +340,80 @@ const DoubleSlider = forwardRef<
   </SliderPrimitive.Root>
 ));
 
-export function DurationFilter(props: {
-  value: [number, number] | [];
-  onChange(value: [number, number]): void;
-}) {
-  const minValue = 0;
-  const maxValue = 100000;
-  const defaultValues: [number, number] = [minValue, maxValue];
-  const values: [number, number] = props.value.length ? props.value : defaultValues;
+export const DurationFilter = memo(
+  (props: { value: [number, number] | []; onChange(value: [number, number]): void }) => {
+    const minValue = 0;
+    const maxValue = 100000;
+    const defaultValues: [number, number] = [minValue, maxValue];
+    const values: [number, number] = props.value.length ? props.value : defaultValues;
 
-  const handleSliderChange = (newValues: [number, number]) => {
-    props.onChange(newValues);
-  };
+    const handleSliderChange = (newValues: [number, number]) => {
+      props.onChange(newValues);
+    };
 
-  const handleInputChange = (index: number, value: string) => {
-    const numValue = Number.parseInt(value) || minValue;
-    const newValues: [number, number] = [...values];
-    newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
-    props.onChange(newValues);
-  };
+    const handleInputChange = (index: number, value: string) => {
+      const numValue = Number.parseInt(value) || minValue;
+      const newValues: [number, number] = [...values];
+      newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
+      props.onChange(newValues);
+    };
 
-  return (
-    <Filter name="Duration">
-      <FilterTitle
-        changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
-        children={'Duration'}
-        onReset={() => props.onChange(defaultValues)}
-      />
-      <FilterContent>
-        <div className="space-y-6 p-2">
-          <div className="space-y-2">
-            <div className="space-y-1">
-              <label className="font-mono text-xs text-zinc-400">MIN</label>
-              <div className="relative">
-                <FilterInput
-                  type="number"
-                  value={values[0]}
-                  onChange={e => handleInputChange(0, e.target.value)}
-                  className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
-                />
-                <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
-                  ms
-                </span>
+    return (
+      <Filter name="Duration">
+        <FilterTitle
+          changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
+          children={'Duration'}
+          onReset={() => props.onChange(defaultValues)}
+        />
+        <FilterContent>
+          <div className="space-y-6 p-2">
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <label className="font-mono text-xs text-zinc-400">MIN</label>
+                <div className="relative">
+                  <FilterInput
+                    type="number"
+                    value={values[0]}
+                    onChange={e => handleInputChange(0, e.target.value)}
+                    className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
+                  />
+                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
+                    ms
+                  </span>
+                </div>
               </div>
-            </div>
-            <div className="space-y-1">
-              <label className="font-mono text-xs text-zinc-400">MAX</label>
-              <div className="relative">
-                <FilterInput
-                  type="number"
-                  value={values[1]}
-                  onChange={e => handleInputChange(1, e.target.value)}
-                  className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
-                />
-                <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
-                  ms
-                </span>
+              <div className="space-y-1">
+                <label className="font-mono text-xs text-zinc-400">MAX</label>
+                <div className="relative">
+                  <FilterInput
+                    type="number"
+                    value={values[1]}
+                    onChange={e => handleInputChange(1, e.target.value)}
+                    className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
+                  />
+                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
+                    ms
+                  </span>
+                </div>
               </div>
             </div>
+            <DoubleSlider
+              defaultValue={defaultValues}
+              max={maxValue}
+              min={minValue}
+              step={1}
+              value={values}
+              onValueChange={handleSliderChange}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            />
           </div>
-          <DoubleSlider
-            defaultValue={defaultValues}
-            max={maxValue}
-            min={minValue}
-            step={1}
-            value={values}
-            onValueChange={handleSliderChange}
-            className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-          />
-        </div>
-      </FilterContent>
-    </Filter>
-  );
-}
+        </FilterContent>
+      </Filter>
+    );
+  },
+);
 
-export function TimelineFilter() {
+export const TimelineFilter = memo(() => {
   const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
   const [dateRange, setDateRange] = useState<DateRange | undefined>({
     from: addDays(new Date(), -3),
@@ -510,4 +516,4 @@ export function TimelineFilter() {
       </FilterContent>
     </Filter>
   );
-}
+});
diff --git a/packages/web/app/src/pages/target-insights-new-trace.tsx b/packages/web/app/src/pages/target-insights-new-trace.tsx
index dd0e50821a..11c4be4d69 100644
--- a/packages/web/app/src/pages/target-insights-new-trace.tsx
+++ b/packages/web/app/src/pages/target-insights-new-trace.tsx
@@ -1,633 +1,1252 @@
-import {
-  ComponentPropsWithoutRef,
-  ElementRef,
-  forwardRef,
-  Fragment,
-  InputHTMLAttributes,
-  ReactNode,
-  useMemo,
-  useState,
-} from 'react';
-import { formatDate } from 'date-fns';
-import {
-  ArrowLeft,
-  ArrowUpDown,
-  Check,
-  ChevronDown,
-  ChevronRight,
-  ExternalLink,
-  MoreHorizontal,
-  Search,
-  SearchIcon,
-} from 'lucide-react';
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { Fragment, ReactNode, useCallback, useRef, useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { Input } from '@/components/ui/input';
 import { Meta } from '@/components/ui/meta';
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarProvider,
-  SidebarSeparator,
-} from '@/components/ui/sidebar';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { formatDuration, formatNumber } from '@/lib/hooks';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-import { Link } from '@tanstack/react-router';
+import { useWidthSync, WidthSyncProvider } from './target-insights-new-width';
+
+const rootSpan: SpanProps = {
+  id: 'root',
+  title: 'FetchProducts',
+  serviceName: 'gateway',
+  duration: 8.12,
+  startedAt: 0,
+  children: [
+    {
+      id: '1ns581b',
+      title: 'plan',
+      serviceName: 'gateway',
+      duration: 2.3,
+      startedAt: 0.2,
+      children: [],
+    },
+    {
+      id: '213hbsdgs',
+      title: 'subgraph',
+      serviceName: 'products',
+      duration: 4.06,
+      startedAt: 2.3,
+      children: [
+        {
+          id: '138sndhs',
+          title: 'parse',
+          duration: 0.1,
+          startedAt: 2.4,
+          children: [],
+        },
+        {
+          id: '1n1bsxs1',
+          title: 'validate',
+          duration: 0.9,
+          startedAt: 2.5,
+          children: [],
+        },
+      ],
+    },
+    {
+      id: '1n23sxs1',
+      title: 'subgraph',
+      serviceName: 'prices',
+      duration: 2.03,
+      startedAt: 4.06,
+      children: [
+        {
+          id: '19nxb23b',
+          title: 'parse',
+          duration: 0.1,
+          startedAt: 4.1,
+          children: [],
+        },
+        {
+          id: '284bsdb1',
+          title: 'validate',
+          duration: 1.2,
+          startedAt: 4.2,
+          children: [
+            {
+              id: '284bsdb1',
+              title: 'async validation',
+              duration: 0.2,
+              startedAt: 5.4,
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+type Trace = {
+  id: string;
+  timestamp: number;
+  duration: number;
+  status: 'ok' | 'error';
+  kind: 'query' | 'mutation' | 'subscription';
+  operationName: string;
+  operationHash: string;
+  httpStatus: number;
+  httpMethod: 'GET' | 'POST';
+  httpHost: string;
+  httpRoute: string;
+  httpUrl: string;
+  subgraphNames: string[];
+};
+
+const now = new Date();
+function generateTraceId() {
+  return [...Array(32)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
+}
+const data: Trace[] = [
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime(),
+    status: 'ok',
+    duration: 6019,
+    kind: 'query',
+    operationName: 'FetchProducts',
+    operationHash: '3h1s',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['link', 'products', 'prices'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 120000,
+    status: 'ok',
+    duration: 6019,
+    kind: 'query',
+    operationName: 'FetchProducts',
+    operationHash: '3h1s',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['link', 'products', 'prices'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 240000,
+    status: 'error',
+    duration: 10045,
+    kind: 'mutation',
+    operationName: 'UpdateProduct',
+    operationHash: '8f2b',
+    httpStatus: 500,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['products'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 360000,
+    status: 'ok',
+    duration: 3045,
+    kind: 'query',
+    operationName: 'GetUser',
+    operationHash: 'a7g4',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 480000,
+    status: 'ok',
+    duration: 4521,
+    kind: 'query',
+    operationName: 'ListOrders',
+    operationHash: 'c9h2',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders', 'users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 600000,
+    status: 'error',
+    duration: 7890,
+    kind: 'mutation',
+    operationName: 'CancelOrder',
+    operationHash: 'd1k8',
+    httpStatus: 400,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 720000,
+    status: 'ok',
+    duration: 2156,
+    kind: 'subscription',
+    operationName: 'OrderStatusUpdated',
+    operationHash: 'e4m7',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['orders'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 840000,
+    status: 'ok',
+    duration: 5092,
+    kind: 'query',
+    operationName: 'FetchCart',
+    operationHash: 'f2p9',
+    httpStatus: 200,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['cart', 'products'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 960000,
+    status: 'ok',
+    duration: 6820,
+    kind: 'mutation',
+    operationName: 'AddToCart',
+    operationHash: 'g7r5',
+    httpStatus: 201,
+    httpMethod: 'POST',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['cart'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+];
+
+const fetchProductsQueryString = `
+  query FetchProduct {
+    products {
+      id
+      name
+      price
+    }
+  }
+`;
+
+interface TraceAttribute {
+  name: string;
+  value: string | number | ReactNode;
+  category?: string;
+}
+
+function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
+  const [width] = useWidthSync();
+  const [highlightedServiceName, setHighlightedServiceName] = useState<string | null>(null);
+  const rootSpan = props.rootSpan;
+  const serviceNames = props.serviceNames;
 
-function FilterSearch() {
   return (
-    <div className="mt-4 flex w-full max-w-sm items-center space-x-2">
-      <FilterInput type="text" placeholder="Search values" />
+    <div className="flex h-full flex-col">
+      <div className="sticky top-0 z-10 border-b border-gray-800">
+        <div className="flex w-full items-center text-xs text-white">
+          <div className="h-12 shrink-0 py-2" style={{ width }}>
+            <div className="pl-4">
+              <div className="font-medium">Timeline</div>
+              <div className="text-xs text-gray-500">Spans and details</div>
+            </div>
+          </div>
+          <div className="h-12 grow pr-8">
+            <div className="relative h-full w-full">
+              <div className="absolute left-0 top-6 -translate-x-1/2 text-center">0ms</div>
+              <div className="absolute bottom-0 left-0 h-2 w-px bg-[#27272a]" />
+              <div className="absolute left-[25%] top-6 -translate-x-1/2 text-center">2.03ms</div>
+              <div className="absolute bottom-0 left-[25%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute left-[50%] top-6 -translate-x-1/2 text-center">4.06ms</div>
+              <div className="absolute bottom-0 left-[50%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute left-[75%] top-6 -translate-x-1/2 text-center">6.09ms</div>
+              <div className="absolute bottom-0 left-[75%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+              <div className="absolute right-0 top-6 translate-x-1/2 text-center">8.12ms</div>
+              <div className="absolute bottom-0 right-0 h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <ScrollArea className="flex-grow">
+        <div>
+          <TraceTree
+            leftPanelWidth={width}
+            rootSpan={rootSpan}
+            highlightedServiceName={highlightedServiceName}
+          />
+        </div>
+      </ScrollArea>
+      <div className="sticky bottom-0 z-10 px-2 py-4">
+        <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
+          {serviceNames.map((serviceName, index) => (
+            <div
+              key={serviceName}
+              className="flex cursor-pointer items-center gap-2 hover:text-white"
+              onMouseEnter={() => setHighlightedServiceName(serviceName)}
+              onMouseLeave={() => setHighlightedServiceName(null)}
+            >
+              <div
+                className="size-2"
+                style={{
+                  backgroundColor: colors[index % colors.length],
+                }}
+              />
+              <div>{serviceName}</div>
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }
 
-function Filter(props: { name: string; items: ReactNode[]; hideSearch?: boolean }) {
+function TreeIcon(props: {
+  level: number;
+  /**
+   * Decides whether or not to draw the └[]
+   */
+  hasParent: boolean;
+  /**
+   * Decides whether or not to draw
+   */
+  isLeaf: boolean;
+  /**
+   * Wheter or not to draw ├
+   */
+  isLastChild: boolean;
+  childrenCount: number;
+  isCollapsed: boolean;
+  lines: boolean[];
+  onClick?: () => void;
+}) {
+  const levelWidth = 16;
+  const base = 30;
+  const width = base + props.level * levelWidth;
+
+  const leftSideEdgeStart = (props.level - 1) * levelWidth + 12;
+  const leftSideEdgeEnd = leftSideEdgeStart + 15;
+
+  const rectLeft = 2 + props.level * levelWidth;
+
   return (
-    <Fragment key={props.name}>
-      <SidebarGroup key={props.name} className="py-0">
-        <Collapsible className="group/collapsible">
-          <SidebarGroupLabel
-            asChild
-            className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+    <svg
+      width={width}
+      height="100%"
+      preserveAspectRatio="xMidYMid meet"
+      className="shrink"
+      onClick={props.onClick}
+    >
+      {/* left-side line */}
+      {props.hasParent ? (
+        <line x1={leftSideEdgeStart} y1="16" x2={leftSideEdgeEnd} y2="16" stroke="currentColor" />
+      ) : null}
+
+      {/* bottom line */}
+      {props.isLeaf || props.isCollapsed ? null : (
+        <line x1={rectLeft + 10} x2={rectLeft + 10} y1="16" y2="32" stroke="currentColor" />
+      )}
+
+      {/* leaf span */}
+      {props.isLeaf ? (
+        <circle cx={props.level * 16 + 12} cy="16" r="3" fill="currentColor"></circle>
+      ) : (
+        // number block
+        <>
+          <rect
+            x={rectLeft}
+            y="8"
+            width="20"
+            height="16"
+            rx="3px"
+            ry="3px"
+            fill={props.isCollapsed ? 'currentColor' : 'black'}
+            stroke="currentColor"
+          />
+          <text
+            x={rectLeft + 10}
+            y="20"
+            style={{ fontSize: 10 }}
+            textAnchor="middle"
+            fontWeight={props.isCollapsed ? 700 : 500}
+            fill={props.isCollapsed ? 'white' : 'currentColor'}
           >
-            <CollapsibleTrigger>
-              {props.name}{' '}
-              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-            </CollapsibleTrigger>
-          </SidebarGroupLabel>
-          <CollapsibleContent>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                {!props.hideSearch && <FilterSearch />}
-                {props.items.map((item, index) => (
-                  <SidebarMenuButton>
-                    <div
-                      data-active={index < 2}
-                      className="group/filter-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-                    >
-                      <Check className="hidden size-3 group-data-[active=true]/filter-item:block" />
-                    </div>
-                    {item}
-                  </SidebarMenuButton>
-                ))}
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </CollapsibleContent>
-        </Collapsible>
-      </SidebarGroup>
-      <SidebarSeparator className="mx-0" />
-    </Fragment>
-  );
-}
+            {props.childrenCount}
+          </text>
+        </>
+      )}
 
-function LabelWithColor(props: { className: string; children: ReactNode }) {
-  return (
-    <div className="flex items-center gap-x-2">
-      <div className={cn(`rounded-xs h-[11px] w-[2px]`, props.className)}></div>
-      <div>{props.children}</div>
-    </div>
+      {/* this line is the vertical line (for each parent groups) */}
+      {props.lines.map((line, index) =>
+        line ? (
+          <line
+            x1={16 * (index + 1) - 4}
+            x2={16 * (index + 1) - 4}
+            y1="0"
+            y2={index === props.level - 1 && props.isLastChild ? 16 : 32}
+            stroke="currentColor"
+          />
+        ) : null,
+      )}
+    </svg>
   );
 }
 
-function LabelWithBadge(props: {
-  children: ReactNode;
-  badgeText: string;
-  side?: 'left' | 'right';
-}) {
+function TabButton(props: { isActive: boolean; onClick(): void; children: ReactNode }) {
   return (
-    <div
-      className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
+    <button
+      className={cn(
+        'border-b-2 px-2 py-2',
+        props.isActive ? 'border-[#2662d8]' : 'hover:border-border border-transparent',
+      )}
+      onClick={props.onClick}
     >
-      <Badge variant="outline" className="rounded-sm px-1 font-normal">
-        {props.badgeText}
-      </Badge>
-      <span className="text-foreground font-medium">{props.children}</span>
-    </div>
+      {props.children}
+    </button>
   );
 }
 
-const DoubleSlider = forwardRef<
-  ElementRef<typeof SliderPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn('relative flex w-full touch-none select-none items-center', className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-800">
-      <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
-    </SliderPrimitive.Track>
-    {props.value?.map((_, index) => (
-      <SliderPrimitive.Thumb
-        key={index}
-        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-      />
-    ))}
-  </SliderPrimitive.Root>
-));
-DoubleSlider.displayName = 'DoubleSlider';
-
-interface FilterInputProps extends InputHTMLAttributes<HTMLInputElement> {}
-
-const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-FilterInput.displayName = 'Input';
+function TraceResize(props: { minWidth: number; maxWidth: number }) {
+  const [width, setWidth] = useWidthSync();
+  const [isDragging, setIsDragging] = useState(false);
+  const handleRef = useRef<HTMLDivElement>(null);
+  const startPosRef = useRef(0);
+  const startWidthRef = useRef(0);
+  const { minWidth, maxWidth } = props;
 
-function DurationFilter() {
-  const [values, setValues] = useState([6019, 100000]);
+  // Handle the start of dragging
+  const handleDragStart = useCallback(
+    (clientX: number) => {
+      setIsDragging(true);
+      startPosRef.current = clientX;
+      startWidthRef.current = width;
 
-  const handleSliderChange = (newValues: number[]) => {
-    setValues(newValues);
-  };
+      // Prevent text selection during drag
+      document.body.style.userSelect = 'none';
+    },
+    [width],
+  );
 
-  const handleInputChange = (index: number, value: string) => {
-    const numValue = Number.parseFloat(value) || 0;
-    const newValues = [...values];
-    newValues[index] = Math.min(Math.max(numValue, 0), 100000);
-    setValues(newValues);
-  };
+  // Handle dragging
+  const handleDrag = useCallback(
+    (clientX: number) => {
+      if (!isDragging) return;
+      const delta = clientX - startPosRef.current;
+      let newWidth = startWidthRef.current + delta;
+      // Constrain to min/max
+      newWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);
+      setWidth(newWidth);
+    },
+    [isDragging, minWidth, maxWidth, setWidth],
+  );
+
+  // Handle the end of dragging
+  const handleDragEnd = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = '';
+  }, []);
+
+  // Pointer event handlers
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      // Set pointer capture on the drag handle element
+      if (handleRef.current) {
+        handleRef.current.setPointerCapture(e.pointerId);
+      }
+      handleDragStart(e.clientX);
+    },
+    [handleDragStart],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!isDragging) return;
+      e.preventDefault();
+      handleDrag(e.clientX);
+    },
+    [isDragging, handleDrag],
+  );
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      // Release pointer capture
+      if (handleRef.current) {
+        handleRef.current.releasePointerCapture(e.pointerId);
+      }
+      handleDragEnd();
+    },
+    [handleDragEnd],
+  );
 
   return (
-    <Fragment>
-      <SidebarGroup className="py-0">
-        <Collapsible className="group/collapsible">
-          <SidebarGroupLabel
-            asChild
-            className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-          >
-            <CollapsibleTrigger>
-              Duration{' '}
-              <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
-            </CollapsibleTrigger>
-          </SidebarGroupLabel>
-          <CollapsibleContent>
-            <SidebarGroupContent>
-              <SidebarMenu>
-                <div className="space-y-6 rounded-lg bg-zinc-950 p-2">
-                  <div className="space-y-2">
-                    <div className="space-y-1">
-                      <label className="font-mono text-xs text-zinc-400">MIN</label>
-                      <div className="relative">
-                        <FilterInput
-                          type="number"
-                          value={values[0].toFixed(2)}
-                          onChange={e => handleInputChange(0, e.target.value)}
-                          className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
-                        />
-                        <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
-                          ms
-                        </span>
-                      </div>
-                    </div>
-                    <div className="space-y-1">
-                      <label className="font-mono text-xs text-zinc-400">MAX</label>
-                      <div className="relative">
-                        <FilterInput
-                          type="number"
-                          value={values[1].toFixed(2)}
-                          onChange={e => handleInputChange(1, e.target.value)}
-                          className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
-                        />
-                        <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
-                          ms
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <DoubleSlider
-                    defaultValue={[6019, 100000]}
-                    max={100000}
-                    min={0}
-                    step={1}
-                    value={values}
-                    onValueChange={handleSliderChange}
-                    className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-                  />
-                </div>
-              </SidebarMenu>
-            </SidebarGroupContent>
-          </CollapsibleContent>
-        </Collapsible>
-      </SidebarGroup>
-      <SidebarSeparator className="mx-0" />
-    </Fragment>
+    <div
+      className="absolute bottom-0 top-0 z-20 w-[5px] cursor-ew-resize"
+      style={{ left: width - 2 }} // Position 2px to the left of the center
+      ref={handleRef}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      {/* Invisible wider hit area */}
+      <div
+        className={cn(
+          'absolute inset-y-0 left-[2px] w-px bg-gray-800',
+          isDragging ? 'bg-gray-600' : 'hover:bg-gray-700',
+        )}
+      />
+    </div>
   );
 }
 
-function Filters() {
+function TraceTree(props: {
+  highlightedServiceName: string | null;
+  rootSpan: SpanProps;
+  leftPanelWidth: number;
+}) {
+  const [width] = useWidthSync();
+  const minWidth = 175;
+  const maxWidth = 450;
+  const serviceNames = listServiceNames(props.rootSpan);
+  const serviceNameToColorMap = Object.fromEntries(
+    serviceNames.map((name, index) => [name, colors[index % colors.length]]),
+  );
+  const containerRef = useRef<HTMLDivElement>(null);
+
   return (
-    <>
-      <DurationFilter />
-      <Filter
-        name="Status"
-        hideSearch
-        items={[
-          <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
-          <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
-        ]}
+    <div className="relative" ref={containerRef}>
+      <TraceResize minWidth={minWidth} maxWidth={maxWidth} />
+      <Node
+        key={props.rootSpan.id}
+        level={0}
+        highlightedServiceName={props.highlightedServiceName}
+        totalDuration={rootSpan.duration}
+        leftPanelWidth={width}
+        span={props.rootSpan}
+        parentSpan={null}
+        groupLines={[]}
+        parentColor={null}
+        color={colors[0]}
+        serviceNameToColorMap={serviceNameToColorMap}
       />
-      <Filter name="Operation Kind" hideSearch items={['Query', 'Mutation', 'Subscription']} />
-      <Filter name="Subgraph Name" items={['link', 'products', 'prices']} />
-      <Filter
-        name="Operation Name"
-        items={[
-          <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
-          <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
-          <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
-        ]}
-      />
-      <Filter
-        name="Client"
-        items={[
-          'unknown',
-          'hive-app',
-          'Hive CLI',
-          'Hive Client',
-          <LabelWithBadge side="right" badgeText="0.46.0">
-            Hive CLI
-          </LabelWithBadge>,
-          <LabelWithBadge side="right" badgeText="0.25.3">
-            Hive Client
-          </LabelWithBadge>,
-        ]}
-      />
-      <Filter name="HTTP Status Code" items={['200', '400', '500']} />
-      <Filter name="HTTP Method" hideSearch items={['POST', 'GET']} />
-      <Filter name="HTTP Host" items={['localhost:4000', 'localhost:4200', 'localhost:3000']} />
-      <Filter name="HTTP Route" items={['/graphql', '/']} />
-      <Filter
-        name="HTTP URL"
-        items={[
-          'http://localhost:3000/',
-          'http://localhost:4000/graphql',
-          'http://localhost:4200/graphql',
-        ]}
-      />
-    </>
+    </div>
   );
 }
 
-function TargetInsightsNewPageContent() {
-  return (
-    <div className="py-6">
-      <SidebarProvider>
-        <Sidebar collapsible="none" className="bg-transparent">
-          <SidebarContent>
-            <SidebarGroupLabel>Filters</SidebarGroupLabel>
-            <Filters />
-          </SidebarContent>
-        </Sidebar>
-        <SidebarInset className="bg-transparent">
-          <div className="flex flex-1 flex-col gap-4 p-4">
-            <div className="flex h-screen flex-col bg-[#121212] text-gray-200">
-              {/* Header */}
-              <div className="border-b border-gray-800">
-                <div className="flex items-center gap-2 p-2">
-                  <Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-200">
-                    <ArrowLeft className="h-4 w-4" />
-                  </Button>
-                  <div className="flex items-center gap-2">
-                    <span className="text-gray-400">Trace ID</span>
-                    <span className="font-mono">6bdd1c9219d65af865e8282f4ee55c65</span>
-                  </div>
-                  <div className="ml-auto flex items-center gap-4">
-                    <div className="flex flex-col items-end">
-                      <span className="text-sm">Total Spans</span>
-                      <span className="text-xl font-bold">11</span>
-                    </div>
-                    <div className="flex flex-col items-end">
-                      <span className="text-sm">Error Spans</span>
-                      <span className="text-xl font-bold">0</span>
-                    </div>
-                  </div>
-                  <div className="ml-4 flex items-center gap-2">
-                    <input type="checkbox" id="span-details" className="accent-blue-500" checked />
-                    <label htmlFor="span-details" className="text-sm">
-                      Span Details
-                    </label>
-                  </div>
-                  <Button variant="ghost" size="icon" className="text-gray-400 hover:text-gray-200">
-                    <ExternalLink className="h-4 w-4" />
-                  </Button>
-                </div>
+type SpanProps = {
+  id: string;
+  title: string;
+  serviceName?: string;
+  duration: number;
+  startedAt: number;
+  children: SpanProps[];
+};
 
-                <div className="flex items-center gap-4 px-4 py-2 text-sm">
-                  <div className="flex items-center gap-2">
-                    <span className="flex items-center gap-1">
-                      <span className="inline-block flex h-4 w-4 items-center justify-center rounded bg-gray-700">
-                        <span className="inline-block h-2 w-2 rounded bg-gray-400"></span>
-                      </span>
-                      my-gateway
-                    </span>
-                    <span className="text-gray-500">—</span>
-                    <span className="rounded bg-gray-800 px-2 py-0.5">POST /graphql</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="inline-block flex h-4 w-4 items-center justify-center rounded-full bg-gray-800">
-                      <span className="inline-block h-2 w-2 rounded-full border-2 border-gray-400"></span>
-                    </span>
-                    <span>16 ms</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <span className="inline-block flex h-4 w-4 items-center justify-center rounded-full bg-gray-800">
-                      <span className="inline-block h-2 w-2 rounded-full border-2 border-gray-400"></span>
-                    </span>
-                    <span>Feb 25, 2025 — 11:38:13</span>
-                  </div>
-                </div>
-              </div>
+type NodeProps = {
+  highlightedServiceName: string | null;
+  level: number;
+  totalDuration: number;
+  leftPanelWidth: number;
+  span: SpanProps;
+  parentSpan: SpanProps | null;
+  groupLines: boolean[];
+  color: string;
+  parentColor: string | null;
+  serviceNameToColorMap: Record<string, string>;
+};
 
-              {/* Main Content */}
-              <div className="flex flex-1 overflow-hidden">
-                {/* Left and Center Panels */}
-                <div className="flex-1 overflow-auto">
-                  {/* Flamegraph Section */}
-                  <div className="border-b border-gray-800">
-                    <div className="flex items-center gap-2 p-2">
-                      <Button variant="ghost" className="gap-2 text-sm hover:bg-gray-800">
-                        <span className="inline-block flex h-4 w-4 items-center justify-center rounded bg-gray-700">
-                          <span className="inline-block h-2 w-2 rounded bg-gray-400"></span>
-                        </span>
-                        Flamegraph
-                      </Button>
-                    </div>
+function countChildren(spans: SpanProps[]): number {
+  return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
+}
 
-                    <div className="grid grid-cols-[1fr,2fr] gap-4 p-4">
-                      <div className="flex items-center justify-between rounded bg-gray-800 p-2">
-                        <span className="text-gray-400">% exec time</span>
-                      </div>
+function _listServiceNames(span: SpanProps, serviceNames: string[]) {
+  if (span.serviceName && !serviceNames.includes(span.serviceName)) {
+    serviceNames.push(span.serviceName);
+  }
 
-                      <div className="flex flex-col gap-2">
-                        <div className="h-4 rounded bg-[#5bbcd6]"></div>
-                        <div className="h-4 rounded bg-[#5bbcd6]"></div>
-                      </div>
-                    </div>
+  for (const child of span.children) {
+    _listServiceNames(child, serviceNames);
+  }
+}
 
-                    <div className="flex items-center px-4 pb-4">
-                      <div className="mr-2 h-6 w-6 rounded bg-red-500"></div>
-                      <span>my-gateway</span>
-                      <div className="ml-auto flex items-center gap-2">
-                        <div className="h-2 w-16 rounded bg-green-500"></div>
-                        <span>100%</span>
-                      </div>
-                    </div>
+function listServiceNames(span: SpanProps): string[] {
+  const serviceNames: string[] = [];
+  _listServiceNames(span, serviceNames);
+  return serviceNames;
+}
 
-                    <div className="px-4 pb-4">
-                      <div className="relative h-4">
-                        <div className="absolute inset-0 flex justify-between">
-                          <span>0ms</span>
-                          <span>3ms</span>
-                          <span>6ms</span>
-                          <span>9ms</span>
-                          <span>12ms</span>
-                          <span>16ms</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
+const colors = [
+  '#2662d8',
+  '#2eb88a',
+  '#e88d30',
+  '#af56db',
+  '#7BA4F9',
+  '#D8B5FF',
+  '#64748B',
+  '#6C5CE7',
+  '#F27059',
+  '#2D9D78',
+];
+function Node(props: NodeProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const leftPositionPercentage = roundFloatToTwoDecimals(
+    (props.span.startedAt / props.totalDuration) * 100,
+  );
+  const widthPercentage = roundFloatToTwoDecimals(
+    (props.span.duration / props.totalDuration) * 100,
+  );
 
-                  {/* Search Filter */}
-                  <div className="p-4">
-                    <Input
-                      className="border-gray-700 bg-gray-900 text-gray-300 placeholder:text-gray-500"
-                      placeholder={`Search Filter : select options from suggested values, for IN/NOT IN operators - press "Enter" after selecting options`}
-                    />
-                  </div>
+  const isNearRightEdge = leftPositionPercentage + widthPercentage > 85;
+  const isDimmed =
+    typeof props.highlightedServiceName === 'string' &&
+    props.highlightedServiceName !== props.span.serviceName;
+
+  const isLastChild =
+    props.parentSpan?.children[props.parentSpan.children.length - 1].id === props.span.id;
+
+  const childrenCount = collapsed
+    ? countChildren(props.span.children) + 1
+    : props.span.children.length;
+  const canBeCollapsed = props.span.children.length > 0;
+
+  const color = props.color;
+  const parentColor = props.parentColor ?? color;
+
+  const percentageOfTotal = ((props.span.duration / props.totalDuration) * 100).toFixed(2);
+  const percentageOfParent = props.parentSpan
+    ? ((props.span.duration / props.parentSpan.duration) * 100).toFixed(2)
+    : null;
 
-                  {/* Spans Tree */}
-                  <div className="p-4">
-                    <div className="mb-4 flex items-center gap-2">
-                      <ChevronDown className="h-4 w-4" />
-                      <span className="font-bold">11</span>
-                      <span className="rounded bg-gray-800 px-2 py-0.5">POST /graphql</span>
+  return (
+    <>
+      <div className="cursor-pointer pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
+        <div className="relative flex h-8 w-full items-center overflow-hidden">
+          <div
+            className="relative flex h-8 shrink-0 items-center gap-x-2 overflow-hidden pl-1"
+            style={{ width: `${props.leftPanelWidth}px` }}
+          >
+            <div className="flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500">
+              <TreeIcon
+                key={`tree-icon-${props.span.id}`}
+                isLeaf={props.span.children.length === 0}
+                isLastChild={isLastChild}
+                childrenCount={childrenCount}
+                hasParent={!!props.parentSpan}
+                level={props.level}
+                lines={props.groupLines}
+                isCollapsed={collapsed}
+                onClick={canBeCollapsed ? () => setCollapsed(collapsed => !collapsed) : undefined}
+              />
+            </div>
+            <div
+              className={cn('whitespace-nowrap text-xs', isDimmed ? 'text-gray-500' : 'text-white')}
+            >
+              {props.span.title}
+            </div>
+            {props.span.serviceName ? (
+              <div
+                className={cn(
+                  'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs',
+                  isDimmed ? 'text-gray-600' : 'text-gray-500',
+                )}
+              >
+                {props.span.serviceName}
+              </div>
+            ) : null}
+          </div>
+          <div
+            className={cn(
+              'relative flex h-full grow items-center overflow-hidden',
+              isDimmed ? 'opacity-25' : '',
+            )}
+          >
+            <Tooltip disableHoverableContent delayDuration={100}>
+              <TooltipTrigger asChild>
+                <div
+                  className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
+                  style={{
+                    left: `min(${leftPositionPercentage}%, 100% - 1px)`,
+                    width: `${widthPercentage}%`,
+                    backgroundColor: color,
+                  }}
+                >
+                  <div
+                    className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
+                    style={{
+                      fontSize: '11px',
+                      ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+                    }}
+                  >
+                    {props.span.duration}ms
+                  </div>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
+              >
+                {/* Content */}
+                <div className="space-y-3">
+                  <div className="grid grid-cols-2 gap-y-2">
+                    <div className="text-gray-400">Duration</div>
+                    <div className="text-right font-mono">
+                      <span>{props.span.duration}ms</span>
                     </div>
 
-                    {/* Span Items */}
-                    <div className="space-y-4">
-                      {/* POST /graphql */}
-                      <div className="border-l-2 border-gray-700 pl-4">
-                        <div className="flex items-center">
-                          <span className="w-24">my-gateway</span>
-                          <div className="mx-4 flex-1">
-                            <div className="h-4 w-full rounded-sm bg-[#5bbcd6]"></div>
-                          </div>
-                          <span className="w-16 text-right">16.69 ms</span>
-                        </div>
-                      </div>
+                    <div className="text-gray-400">Started At</div>
+                    <div className="text-right font-mono">{props.span.startedAt}ms</div>
 
-                      {/* graphql.execute */}
-                      <div className="border-l-2 border-gray-700 pl-4">
-                        <div className="flex items-center">
-                          <span className="flex w-24 items-center gap-1">
-                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
-                            graphql.execute
-                          </span>
-                          <div className="mx-4 flex-1">
-                            <div className="h-4 w-full rounded-sm bg-[#5bbcd6]"></div>
-                          </div>
-                          <span className="w-16 text-right">16.24 ms</span>
-                        </div>
-                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
-                          <span className="w-24">my-gateway</span>
-                        </div>
-                      </div>
+                    <div className="text-gray-400">% of Total</div>
+                    <div className="text-right font-mono">{percentageOfTotal}%</div>
 
-                      {/* graphql.parse */}
-                      <div className="border-l-2 border-gray-700 pl-4">
-                        <div className="flex items-center">
-                          <span className="flex w-24 items-center gap-1">
-                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
-                            graphql.parse
-                          </span>
-                          <div className="mx-4 flex-1">
-                            <div className="h-4 w-[2%] rounded-sm bg-[#5bbcd6]"></div>
-                          </div>
-                          <span className="w-16 text-right">0.03 ms</span>
-                        </div>
-                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
-                          <span className="w-24">my-gateway</span>
+                    <div className="col-span-2">
+                      {/* Timeline visualization */}
+                      <div>
+                        <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                          <div
+                            className="h-full"
+                            style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
+                          />
                         </div>
                       </div>
+                    </div>
 
-                      {/* graphql.validate */}
-                      <div className="border-l-2 border-gray-700 pl-4">
-                        <div className="flex items-center">
-                          <span className="flex w-24 items-center gap-1">
-                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
-                            graphql.validate
-                          </span>
-                          <div className="mx-4 flex-1">
-                            <div className="h-4 w-[1%] rounded-sm bg-[#5bbcd6]"></div>
-                          </div>
-                          <span className="w-16 text-right">0.02 ms</span>
-                        </div>
-                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
-                          <span className="w-24">my-gateway</span>
-                        </div>
-                      </div>
+                    {percentageOfParent === null ? null : (
+                      <>
+                        <div className="text-gray-400">% of Parent</div>
+                        <div className="text-right font-mono">{percentageOfParent}%</div>
 
-                      {/* subgraph.execute */}
-                      <div className="border-l-2 border-gray-700 pl-4">
-                        <div className="flex items-center">
-                          <span className="flex w-24 items-center gap-1">
-                            <span className="inline-block h-4 w-4 rounded-full bg-gray-700"></span>
-                            subgraph.execute (products)
-                          </span>
-                          <div className="mx-4 flex-1">
-                            <div className="h-4 w-[20%] rounded-sm bg-[#5bbcd6]"></div>
+                        <div className="col-span-2">
+                          {/* Timeline visualization */}
+                          <div>
+                            <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                              <div
+                                className="h-full"
+                                style={{
+                                  width: `${percentageOfParent}%`,
+                                  backgroundColor: parentColor,
+                                }}
+                              />
+                            </div>
                           </div>
-                          <span className="w-16 text-right">3.35 ms</span>
                         </div>
-                        <div className="mt-1 border-l-2 border-gray-700 pl-4">
-                          <span className="w-24">my-gateway</span>
-                        </div>
-                      </div>
-                    </div>
+                      </>
+                    )}
                   </div>
                 </div>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+      {collapsed
+        ? null
+        : props.span.children.length
+          ? props.span.children.map(childSpan => {
+              const span = {
+                ...childSpan,
+                // if the child span doesn't have a serviceName, use the parent's serviceName
+                serviceName: childSpan.serviceName ?? props.span.serviceName,
+              };
 
-                {/* Right Panel - Span Details */}
-                <div className="w-80 overflow-auto border-l border-gray-800">
-                  <div className="space-y-6 p-4">
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">SPAN NAME</h3>
-                      <div className="rounded bg-gray-800 p-2">subgraph.execute (list)</div>
-                    </div>
-
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">SPAN ID</h3>
-                      <div className="rounded bg-gray-800 p-2 font-mono text-sm">
-                        cba5a169850884d6
-                      </div>
-                    </div>
+              return (
+                <Node
+                  key={span.id}
+                  highlightedServiceName={props.highlightedServiceName}
+                  leftPanelWidth={props.leftPanelWidth}
+                  totalDuration={props.totalDuration}
+                  span={span}
+                  level={props.level + 1}
+                  parentSpan={props.span}
+                  groupLines={
+                    isLastChild
+                      ? // remove the last line if it's the last span from the group
+                        props.groupLines.slice(0, -1).concat(false, true)
+                      : props.groupLines.concat(true)
+                  }
+                  parentColor={color}
+                  color={span.serviceName ? props.serviceNameToColorMap[span.serviceName] : color}
+                  serviceNameToColorMap={props.serviceNameToColorMap}
+                />
+              );
+            })
+          : null}
+    </>
+  );
+}
 
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">START TIME</h3>
-                      <div className="rounded bg-gray-800 p-2">Feb 25, 2025 — 11:38:13</div>
-                    </div>
+function GridTable(props: {
+  rows: Array<{
+    key: string;
+    value: ReactNode;
+  }>;
+}) {
+  return (
+    <div className="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
+      {props.rows.map(row => (
+        <Fragment key={row.key}>
+          <div className="font-sans text-gray-400">{row.key}</div>
+          <div className="text-right font-mono">{row.value}</div>
+        </Fragment>
+      ))}
+    </div>
+  );
+}
 
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">DURATION</h3>
-                      <div className="rounded bg-gray-800 p-2">1.8 ms</div>
-                    </div>
+function roundFloatToTwoDecimals(num: number) {
+  return Math.round(num * 100) / 100;
+}
 
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">SERVICE</h3>
-                      <div className="flex items-center gap-2 rounded bg-gray-800 p-2">
-                        <span className="inline-block h-2 w-2 rounded-full bg-blue-500"></span>
-                        my-gateway
-                      </div>
-                    </div>
+function TraceSheet({ trace }: { trace: Trace | null }) {
+  const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
 
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">SPAN KIND</h3>
-                      <div className="rounded bg-gray-800 p-2">Client</div>
-                    </div>
+  if (!trace) {
+    return null;
+  }
 
-                    <div>
-                      <h3 className="mb-2 text-xs text-gray-500">STATUS CODE STRING</h3>
-                      <div className="rounded bg-gray-800 p-2">Ok</div>
-                    </div>
+  const attributes: Array<TraceAttribute> = [
+    {
+      name: 'graphql.operationKind',
+      value: trace.kind,
+      category: 'GraphQL',
+    },
+    {
+      name: 'graphql.subgraphs',
+      value: trace.subgraphNames.join(', '),
+      category: 'GraphQL',
+    },
+    {
+      name: 'http.method',
+      value: trace.httpMethod,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.host',
+      value: trace.httpHost,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.route',
+      value: trace.httpRoute,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.url',
+      value: trace.httpUrl,
+      category: 'HTTP',
+    },
+    {
+      name: 'http.status',
+      value: trace.httpStatus,
+      category: 'HTTP',
+    },
+  ];
 
-                    <Button className="w-full bg-gray-800 text-gray-300 hover:bg-gray-700">
-                      Go to related logs
-                    </Button>
+  const serviceNames = listServiceNames(rootSpan);
 
-                    <Tabs defaultValue="attributes">
-                      <TabsList className="w-full justify-start gap-8 border-b border-gray-700 bg-transparent pb-2">
-                        <TabsTrigger
-                          value="attributes"
-                          className="rounded-none bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
+  return (
+    <div className="h-full">
+      <TooltipProvider>
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
+            <WidthSyncProvider defaultWidth={251}>
+              <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
+            </WidthSyncProvider>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
+            <div className="flex h-full flex-col">
+              <div className="sticky top-0 z-10 border-b border-gray-800">
+                <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+                  <TabButton
+                    isActive={activeView === 'attributes'}
+                    onClick={() => setActiveView('attributes')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Attributes</div>
+                      <div>
+                        <Badge
+                          variant="secondary"
+                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
                         >
-                          Attributes
-                        </TabsTrigger>
-                        <TabsTrigger
-                          value="events"
-                          className="rounded-none bg-transparent data-[state=active]:border-b-2 data-[state=active]:border-blue-500"
+                          7
+                        </Badge>
+                      </div>
+                    </div>
+                  </TabButton>
+                  <TabButton
+                    isActive={activeView === 'events'}
+                    onClick={() => setActiveView('events')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Events</div>
+                      <div>
+                        <Badge
+                          variant="secondary"
+                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
                         >
-                          Events
-                        </TabsTrigger>
-                        <div className="ml-auto">
-                          <Search className="h-4 w-4" />
+                          3
+                        </Badge>
+                      </div>
+                    </div>
+                  </TabButton>
+                  <TabButton
+                    isActive={activeView === 'operation'}
+                    onClick={() => setActiveView('operation')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Operation</div>
+                    </div>
+                  </TabButton>
+                </div>
+              </div>
+              <ScrollArea className="relative grow">
+                <div className="h-full">
+                  {activeView === 'attributes' ? (
+                    <div>
+                      {attributes.length > 0 ? (
+                        <div>
+                          {attributes.map((attr, index) => (
+                            <div
+                              key={index}
+                              className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
+                            >
+                              <div className="text-gray-400">{attr.name}</div>
+                              <div className="font-mono text-white">{attr.value}</div>
+                            </div>
+                          ))}
                         </div>
-                      </TabsList>
-
-                      <TabsContent value="attributes" className="mt-4">
-                        <div className="space-y-4">
-                          <div>
-                            <div className="text-sm">gateway.upstream.subgraph.name</div>
-                            <div className="mt-1 rounded bg-gray-800 p-2">list</div>
-                          </div>
+                      ) : (
+                        <div className="py-4 text-center">
+                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                          <p className="text-xs text-gray-500">
+                            No attributes found for this trace
+                          </p>
                         </div>
-                      </TabsContent>
-
-                      <TabsContent value="events">
-                        <div className="p-4 text-center text-gray-500">No events</div>
-                      </TabsContent>
-                    </Tabs>
-                  </div>
+                      )}
+                    </div>
+                  ) : null}
+                  {activeView === 'events' ? (
+                    <div className="p-4">
+                      <div className="space-y-2">
+                        {[
+                          {
+                            code: 'DB_CONNECTION_ERROR',
+                            message: 'Connection to database timed out after 5 seconds',
+                            stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
+                          },
+                          {
+                            code: 'GRAPHQL_PARSE_FAILED',
+                            message: 'Sent GraphQL Operation cannot be parsed',
+                          },
+                          {
+                            code: 'TIMEOUT_ERROR',
+                            message: 'Operation timed out after 10 seconds',
+                          },
+                        ].map((exception, index) => (
+                          <div
+                            key={index}
+                            className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
+                          >
+                            <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
+                              <span className="font-mono text-xs font-medium text-red-300">
+                                {exception.code}
+                              </span>
+                              <Badge
+                                variant="outline"
+                                className="border-red-700 bg-red-950 text-[10px] text-red-300"
+                              >
+                                Exception
+                              </Badge>
+                            </div>
+                            <div className="p-3 text-xs">
+                              <p className="text-gray-300">{exception.message}</p>
+                              {exception.stacktrace && (
+                                <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
+                                  {exception.stacktrace}
+                                </pre>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ) : null}
+                  {activeView === 'operation' ? (
+                    <div className="absolute bottom-0 top-0 w-full">
+                      <GraphQLHighlight
+                        height={'100%'}
+                        options={{
+                          fontSize: 10,
+                          minimap: { enabled: false },
+                        }}
+                        code={fetchProductsQueryString}
+                      />
+                    </div>
+                  ) : null}
                 </div>
-              </div>
+              </ScrollArea>
             </div>
-            )
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </TooltipProvider>
     </div>
   );
 }
 
+function TargetInsightsNewPageContent() {
+  const traceInSheet = data[0];
+
+  return <TraceSheet trace={traceInSheet} />;
+}
+
 export function TargetInsightsNewTracePage(props: {
   organizationSlug: string;
   projectSlug: string;
@@ -635,14 +1254,23 @@ export function TargetInsightsNewTracePage(props: {
 }) {
   return (
     <>
-      <Meta title="Insights" />
+      <Meta title="Trace 12323134" />
       <TargetLayout
         organizationSlug={props.organizationSlug}
         projectSlug={props.projectSlug}
         targetSlug={props.targetSlug}
         page={Page.Insights}
+        className="flex flex-col"
       >
-        <TargetInsightsNewPageContent />
+        <div className="flex flex-1 flex-col">
+          <AutoSizer disableWidth>
+            {size => (
+              <div className="w-full" style={{ height: size.height }}>
+                <TargetInsightsNewPageContent />
+              </div>
+            )}
+          </AutoSizer>
+        </div>
       </TargetLayout>
     </>
   );
diff --git a/packages/web/app/src/pages/target-insights-new.tsx b/packages/web/app/src/pages/target-insights-new.tsx
index d25fe72ecf..1d1fc0831b 100644
--- a/packages/web/app/src/pages/target-insights-new.tsx
+++ b/packages/web/app/src/pages/target-insights-new.tsx
@@ -1,4 +1,4 @@
-import { Fragment, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { addDays, formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import {
@@ -325,10 +325,8 @@ function Traffic() {
     // Filter data to the selected range
     const filteredData = data.filter(
       entry =>
-        parseDate(entry.timestamp, 'yyyy-MM-dd', now).getTime() >=
-          parseDate(left, 'yyyy-MM-dd', now).getTime() &&
-        parseDate(entry.timestamp, 'YYYY-MM-dd', now).getTime() <=
-          parseDate(right, 'yyyy-MM-dd', now).getTime(),
+        entry.timestamp >= parseDate(left, 'yyyy-MM-dd', now).getTime() &&
+        entry.timestamp <= parseDate(right, 'yyyy-MM-dd', now).getTime(),
     );
 
     if (filteredData.length > 0) {
@@ -563,16 +561,246 @@ const data: Trace[] = [
     httpUrl: 'http://localhost:3000/',
     subgraphNames: ['users'],
   },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
+  {
+    id: generateTraceId(),
+    timestamp: now.getTime() + 1080000,
+    status: 'error',
+    duration: 3502,
+    kind: 'query',
+    operationName: 'FetchUserProfile',
+    operationHash: 'h3q6',
+    httpStatus: 401,
+    httpMethod: 'GET',
+    httpHost: 'localhost:3000',
+    httpRoute: '/graphql',
+    httpUrl: 'http://localhost:3000/',
+    subgraphNames: ['users'],
+  },
 ];
 
 export const columns: ColumnDef<Trace>[] = [
   {
     accessorKey: 'id',
-    header: () => <div className="text-center">Trace ID</div>,
+    header: () => <div className="pl-2 text-left">Trace ID</div>,
     cell: ({ row }) => {
+      const traceId = row.getValue('id') as string;
+
       return (
-        <div className="w-24 truncate px-2 text-center font-mono text-xs font-medium">
-          {row.getValue('id')}
+        <div className="px-2 text-left font-mono text-xs font-medium">
+          <Link
+            to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
+            className="group block w-[6ch] overflow-hidden whitespace-nowrap text-white"
+          >
+            <span>
+              <span className="underline decoration-gray-800 decoration-2 underline-offset-2 group-hover:decoration-white">
+                {traceId.substring(0, 8)}
+              </span>
+              <span
+                style={{
+                  color: 'transparent',
+                  pointerEvents: 'none',
+                  textDecoration: 'none',
+                }}
+              >
+                {traceId.substring(8)}
+              </span>
+            </span>
+          </Link>
         </div>
       );
     },
@@ -591,36 +819,49 @@ export const columns: ColumnDef<Trace>[] = [
         </Button>
       );
     },
-    cell: ({ row }) => (
-      <Tooltip delayDuration={300}>
-        <TooltipTrigger asChild>
-          <div className="px-4 font-mono text-xs uppercase">
-            {formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss')}
-          </div>
-        </TooltipTrigger>
-        <TooltipContent
-          side="bottom"
-          className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
-        >
-          <GridTable
-            rows={[
-              {
-                key: 'Local',
-                value: formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss'),
-              },
-              {
-                key: 'UTC',
-                value: formatInTimeZone(row.getValue('timestamp'), 'UTC', 'MMM dd HH:mm:ss'),
-              },
-              {
-                key: 'ISO',
-                value: formatISO(toZonedTime(row.getValue('timestamp'), 'UTC')),
-              },
-            ]}
-          />
-        </TooltipContent>
-      </Tooltip>
-    ),
+    cell: ({ row }) => {
+      const timestamp = row.getValue('timestamp') as number;
+
+      return (
+        <TooltipProvider>
+          <Tooltip delayDuration={300}>
+            <TooltipTrigger asChild>
+              <div className="px-4 font-mono text-xs uppercase">
+                {formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss')}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent
+              side="bottom"
+              className="cursor-auto overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+              onClick={e => {
+                e.stopPropagation();
+              }}
+            >
+              <GridTable
+                rows={[
+                  {
+                    key: 'Local',
+                    value: formatDate(timestamp, 'MMM dd HH:mm:ss'),
+                  },
+                  {
+                    key: 'UTC',
+                    value: formatInTimeZone(timestamp, 'UTC', 'MMM dd HH:mm:ss'),
+                  },
+                  {
+                    key: 'Unix',
+                    value: timestamp,
+                  },
+                  {
+                    key: 'ISO',
+                    value: formatISO(toZonedTime(timestamp, 'UTC')),
+                  },
+                ]}
+              />
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      );
+    },
   },
   {
     accessorKey: 'operationName',
@@ -639,40 +880,42 @@ export const columns: ColumnDef<Trace>[] = [
       );
     },
     cell: ({ row }) => (
-      <Tooltip disableHoverableContent delayDuration={100}>
-        <TooltipTrigger asChild>
-          <div className="flex items-center gap-2 px-4 text-xs">
-            <span className="text-muted-foreground font-mono">
-              {row.original.operationHash.substring(0, 4)}
-            </span>
-            <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
-              {row.original.kind.substring(0, 1).toUpperCase()}
-            </span>
-            <span>{row.getValue('operationName')}</span>
-          </div>
-        </TooltipTrigger>
-        <TooltipContent
-          side="bottom"
-          className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
-        >
-          <GridTable
-            rows={[
-              {
-                key: 'Name',
-                value: row.getValue('operationName'),
-              },
-              {
-                key: 'Kind',
-                value: row.original.kind,
-              },
-              {
-                key: 'Hash',
-                value: row.original.operationHash,
-              },
-            ]}
-          />
-        </TooltipContent>
-      </Tooltip>
+      <TooltipProvider>
+        <Tooltip disableHoverableContent delayDuration={100}>
+          <TooltipTrigger asChild>
+            <div className="flex items-center gap-2 px-4 text-xs">
+              <span className="text-muted-foreground font-mono">
+                {row.original.operationHash.substring(0, 4)}
+              </span>
+              <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
+                {row.original.kind.substring(0, 1).toUpperCase()}
+              </span>
+              <span>{row.getValue('operationName')}</span>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent
+            side="bottom"
+            className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+          >
+            <GridTable
+              rows={[
+                {
+                  key: 'Name',
+                  value: row.getValue('operationName'),
+                },
+                {
+                  key: 'Kind',
+                  value: row.original.kind,
+                },
+                {
+                  key: 'Hash',
+                  value: row.original.operationHash,
+                },
+              ]}
+            />
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     ),
   },
   {
@@ -698,20 +941,22 @@ export const columns: ColumnDef<Trace>[] = [
   },
   {
     accessorKey: 'status',
-    header: 'Status',
+    header: () => <div className="text-center">Status</div>,
     cell: ({ row }) => {
       const status = row.getValue('status');
 
       return (
-        <Badge
-          variant="outline"
-          className={cn(
-            'rounded-sm border-0 px-1 text-xs font-medium uppercase',
-            status === 'ok' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
-          )}
-        >
-          {status}
-        </Badge>
+        <div className="text-center">
+          <Badge
+            variant="outline"
+            className={cn(
+              'rounded-sm border-0 px-1 text-xs font-medium uppercase',
+              status === 'ok' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+            )}
+          >
+            {status}
+          </Badge>
+        </div>
       );
     },
   },
@@ -770,25 +1015,14 @@ export const columns: ColumnDef<Trace>[] = [
       );
     },
   },
-  {
-    accessorKey: 'actions',
-    header: () => <div className="text-center">Actions</div>,
-    cell: () => {
-      return (
-        <div className="text-center font-sans text-xs">
-          <Button asChild variant="link">
-            <Link to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace">
-              View Trace
-            </Link>
-          </Button>
-        </div>
-      );
-    },
-  },
 ];
 
 function TracesList() {
   const [sorting, setSorting] = useState<SortingState>([]);
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 20,
+  });
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = useState({});
@@ -805,11 +1039,13 @@ function TracesList() {
     getFilteredRowModel: getFilteredRowModel(),
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: setRowSelection,
+    onPaginationChange: setPagination,
     state: {
       sorting,
       columnFilters,
       columnVisibility,
       rowSelection,
+      pagination,
     },
   });
 
@@ -940,6 +1176,217 @@ type FilterState = {
 
 type FilterKeys = keyof FilterState;
 
+const filterOptions = {
+  'graphql.status': [
+    {
+      value: 'ok',
+      searchContent: 'ok',
+      label: <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
+      count: 12_500_000,
+    },
+    {
+      value: 'error',
+      searchContent: 'error',
+      label: <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
+      count: 13_123,
+    },
+  ],
+  'graphql.kind': [
+    {
+      value: 'query',
+      searchContent: 'query',
+      label: 'Query',
+      count: 12_500_000,
+    },
+    {
+      value: 'mutation',
+      searchContent: 'mutation',
+      label: 'Mutation',
+      count: 3_200_000,
+    },
+    {
+      value: 'subscription',
+      searchContent: 'subscription',
+      label: 'Subscription',
+      count: 123_123,
+    },
+  ],
+  'graphql.subgraph': [
+    {
+      value: 'link',
+      searchContent: 'link',
+      label: 'link',
+      count: 530_000,
+    },
+    {
+      value: 'products',
+      searchContent: 'products',
+      label: 'products',
+      count: 612_000,
+    },
+    {
+      value: 'prices',
+      searchContent: 'prices',
+      label: 'prices',
+      count: 610_000,
+    },
+  ],
+  'graphql.name': [
+    {
+      value: '3h1s',
+      searchContent: '3h1s fetchproducts',
+      label: <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
+      count: 368_000,
+    },
+    {
+      value: '7na1',
+      searchContent: '7na1 fetchUsers',
+      label: <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
+      count: 123_000,
+    },
+    {
+      value: '64a1',
+      searchContent: '64a1 FetchProducts',
+      label: <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
+      count: 1_000,
+    },
+  ],
+  'graphql.client': [
+    {
+      value: 'unknown',
+      searchContent: 'unknown',
+      label: 'unknown',
+      count: 43_123,
+    },
+    {
+      value: 'hive-app',
+      searchContent: 'hive-app',
+      label: 'hive-app',
+      count: 720_000,
+    },
+    {
+      value: 'Hive CLI',
+      searchContent: 'Hive CLI',
+      label: 'Hive CLI',
+      count: 340_000,
+    },
+    {
+      value: 'Hive Client',
+      searchContent: 'Hive Client',
+      label: 'Hive Client',
+      count: 87_123,
+    },
+    {
+      value: 'Hive CLI@0.46.0',
+      searchContent: 'Hive CLI@0.46.0',
+      label: (
+        <LabelWithBadge side="right" badgeText="0.46.0">
+          Hive CLI
+        </LabelWithBadge>
+      ),
+      count: 1_000,
+    },
+    {
+      value: 'Hive Client@0.25.3',
+      searchContent: 'Hive Client@0.25.3',
+      label: (
+        <LabelWithBadge side="right" badgeText="0.25.3">
+          Hive Client
+        </LabelWithBadge>
+      ),
+      count: 6_120,
+    },
+  ],
+  'http.status': [
+    {
+      value: '200',
+      searchContent: '200',
+      label: '200',
+      count: 9_123_000,
+    },
+    {
+      value: '400',
+      searchContent: '400',
+      label: '400',
+      count: 100_000,
+    },
+    {
+      value: '500',
+      searchContent: '500',
+      label: '500',
+      count: 52_400,
+    },
+  ],
+  'http.method': [
+    {
+      value: 'GET',
+      searchContent: 'get',
+      label: 'GET',
+      count: 1230,
+    },
+    {
+      value: 'POST',
+      searchContent: 'post',
+      label: 'POST',
+      count: 12_000_000,
+    },
+  ],
+  'http.host': [
+    {
+      value: 'localhost:4000',
+      searchContent: 'localhost:4000',
+      label: 'localhost:4000',
+      count: 12_000_000,
+    },
+    {
+      value: 'localhost:4200',
+      searchContent: 'localhost:4200',
+      label: 'localhost:4200',
+      count: 7_540_123,
+    },
+    {
+      value: 'localhost:3000',
+      searchContent: 'localhost:3000',
+      label: 'localhost:3000',
+      count: 2_320_123,
+    },
+  ],
+  'http.route': [
+    {
+      value: '/graphql',
+      searchContent: '/graphql',
+      label: '/graphql',
+      count: 12_000_000,
+    },
+    {
+      value: '/',
+      searchContent: '/',
+      label: '/',
+      count: 7_540_123,
+    },
+  ],
+  'http.url': [
+    {
+      value: 'http://localhost:3000/',
+      searchContent: 'http://localhost:3000/',
+      label: 'http://localhost:3000/',
+      count: 12_000_000,
+    },
+    {
+      value: 'http://localhost:4000/graphql',
+      searchContent: 'http://localhost:4000/graphql',
+      label: 'http://localhost:4000/graphql',
+      count: 7_540_123,
+    },
+    {
+      value: 'http://localhost:4200/graphql',
+      searchContent: 'http://localhost:4200/graphql',
+      label: 'http://localhost:4200/graphql',
+      count: 2_320_123,
+    },
+  ],
+};
+
 function Filters() {
   const [filters, setFilters] = useState<FilterState>({
     duration: [],
@@ -956,12 +1403,19 @@ function Filters() {
     'http.url': [],
   });
 
-  // Function to update a specific filter
-  const updateFilter = <$Key extends FilterKeys>(key: $Key) => {
-    return (value: FilterState[$Key]) => {
-      setFilters(prev => ({ ...prev, [key]: value }));
-    };
-  };
+  const updateHandlersRef = useRef(new Map<FilterKeys, (value: any) => void>());
+  const updateFilter = useCallback(
+    <$Key extends FilterKeys>(key: $Key): ((value: FilterState[$Key]) => void) => {
+      if (!updateHandlersRef.current.has(key)) {
+        const handler = (value: FilterState[$Key]) => {
+          setFilters(prev => ({ ...prev, [key]: value }));
+        };
+        updateHandlersRef.current.set(key, handler);
+      }
+      return updateHandlersRef.current.get(key)!;
+    },
+    [setFilters],
+  );
 
   const resetFilters = () => {
     setFilters({
@@ -1023,178 +1477,44 @@ function Filters() {
       <MultiSelectFilter
         key="graphql.status"
         name="Status"
-        options={[
-          {
-            value: 'ok',
-            searchContent: 'ok',
-            label: <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
-            count: 12_500_000,
-          },
-          {
-            value: 'error',
-            searchContent: 'error',
-            label: <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
-            count: 13_123,
-          },
-        ]}
+        options={filterOptions['graphql.status']}
         selectedValues={filterSelector('graphql.status')}
         onChange={updateFilter('graphql.status')}
         hideSearch
       />
       <MultiSelectFilter
-        key="kind"
+        key="graphql.kind"
         name="Operation Kind"
-        options={[
-          {
-            value: 'query',
-            searchContent: 'query',
-            label: 'Query',
-            count: 12_500_000,
-          },
-          {
-            value: 'mutation',
-            searchContent: 'mutation',
-            label: 'Mutation',
-            count: 3_200_000,
-          },
-          {
-            value: 'subscription',
-            searchContent: 'subscription',
-            label: 'Subscription',
-            count: 123_123,
-          },
-        ]}
+        options={filterOptions['graphql.kind']}
         selectedValues={filterSelector('graphql.kind')}
         onChange={updateFilter('graphql.kind')}
         hideSearch
       />
       <MultiSelectFilter
-        key="subgraph"
+        key="graphql.subgraph"
         name="Subgraph Name"
-        options={[
-          {
-            value: 'link',
-            searchContent: 'link',
-            label: 'link',
-            count: 530_000,
-          },
-          {
-            value: 'products',
-            searchContent: 'products',
-            label: 'products',
-            count: 612_000,
-          },
-          {
-            value: 'prices',
-            searchContent: 'prices',
-            label: 'prices',
-            count: 610_000,
-          },
-        ]}
+        options={filterOptions['graphql.subgraph']}
         selectedValues={filterSelector('graphql.subgraph')}
         onChange={updateFilter('graphql.subgraph')}
       />
       <MultiSelectFilter
-        key="name"
+        key="graphql.name"
         name="Operation Name"
-        options={[
-          {
-            value: '3h1s',
-            searchContent: '3h1s fetchproducts',
-            label: <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
-            count: 368_000,
-          },
-          {
-            value: '7na1',
-            searchContent: '7na1 fetchUsers',
-            label: <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
-            count: 123_000,
-          },
-          {
-            value: '64a1',
-            searchContent: '64a1 FetchProducts',
-            label: <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
-            count: 1_000,
-          },
-        ]}
+        options={filterOptions['graphql.name']}
         selectedValues={filterSelector('graphql.operation')}
         onChange={updateFilter('graphql.operation')}
       />
       <MultiSelectFilter
-        key="client"
+        key="graphql.client"
         name="Client"
-        options={[
-          {
-            value: 'unknown',
-            searchContent: 'unknown',
-            label: 'unknown',
-            count: 43_123,
-          },
-          {
-            value: 'hive-app',
-            searchContent: 'hive-app',
-            label: 'hive-app',
-            count: 720_000,
-          },
-          {
-            value: 'Hive CLI',
-            searchContent: 'Hive CLI',
-            label: 'Hive CLI',
-            count: 340_000,
-          },
-          {
-            value: 'Hive Client',
-            searchContent: 'Hive Client',
-            label: 'Hive Client',
-            count: 87_123,
-          },
-          {
-            value: 'Hive CLI@0.46.0',
-            searchContent: 'Hive CLI@0.46.0',
-            label: (
-              <LabelWithBadge side="right" badgeText="0.46.0">
-                Hive CLI
-              </LabelWithBadge>
-            ),
-            count: 1_000,
-          },
-          {
-            value: 'Hive Client@0.25.3',
-            searchContent: 'Hive Client@0.25.3',
-            label: (
-              <LabelWithBadge side="right" badgeText="0.25.3">
-                Hive Client
-              </LabelWithBadge>
-            ),
-            count: 6_120,
-          },
-        ]}
+        options={filterOptions['graphql.client']}
         selectedValues={filterSelector('graphql.client')}
         onChange={updateFilter('graphql.client')}
       />
       <MultiSelectFilter
         key="http.status"
         name="HTTP Status Code"
-        options={[
-          {
-            value: '200',
-            searchContent: '200',
-            label: '200',
-            count: 9_123_000,
-          },
-          {
-            value: '400',
-            searchContent: '400',
-            label: '400',
-            count: 100_000,
-          },
-          {
-            value: '500',
-            searchContent: '500',
-            label: '500',
-            count: 52_400,
-          },
-        ]}
+        options={filterOptions['http.status']}
         selectedValues={filterSelector('http.status')}
         onChange={updateFilter('http.status')}
         hideSearch
@@ -1202,20 +1522,7 @@ function Filters() {
       <MultiSelectFilter
         key="http.method"
         name="HTTP Method"
-        options={[
-          {
-            value: 'GET',
-            searchContent: 'get',
-            label: 'GET',
-            count: 1230,
-          },
-          {
-            value: 'POST',
-            searchContent: 'post',
-            label: 'POST',
-            count: 12_000_000,
-          },
-        ]}
+        options={filterOptions['http.method']}
         selectedValues={filterSelector('http.method')}
         onChange={updateFilter('http.method')}
         hideSearch
@@ -1223,72 +1530,21 @@ function Filters() {
       <MultiSelectFilter
         key="http.host"
         name="HTTP Host"
-        options={[
-          {
-            value: 'localhost:4000',
-            searchContent: 'localhost:4000',
-            label: 'localhost:4000',
-            count: 12_000_000,
-          },
-          {
-            value: 'localhost:4200',
-            searchContent: 'localhost:4200',
-            label: 'localhost:4200',
-            count: 7_540_123,
-          },
-          {
-            value: 'localhost:3000',
-            searchContent: 'localhost:3000',
-            label: 'localhost:3000',
-            count: 2_320_123,
-          },
-        ]}
+        options={filterOptions['http.host']}
         selectedValues={filterSelector('http.host')}
         onChange={updateFilter('http.host')}
       />
       <MultiSelectFilter
         key="http.route"
         name="HTTP Route"
-        options={[
-          {
-            value: '/graphql',
-            searchContent: '/graphql',
-            label: '/graphql',
-            count: 12_000_000,
-          },
-          {
-            value: '/',
-            searchContent: '/',
-            label: '/',
-            count: 7_540_123,
-          },
-        ]}
+        options={filterOptions['http.route']}
         selectedValues={filterSelector('http.route')}
         onChange={updateFilter('http.route')}
       />
       <MultiSelectFilter
         key="http.url"
         name="HTTP URL"
-        options={[
-          {
-            value: 'http://localhost:3000/',
-            searchContent: 'http://localhost:3000/',
-            label: 'http://localhost:3000/',
-            count: 12_000_000,
-          },
-          {
-            value: 'http://localhost:4000/graphql',
-            searchContent: 'http://localhost:4000/graphql',
-            label: 'http://localhost:4000/graphql',
-            count: 7_540_123,
-          },
-          {
-            value: 'http://localhost:4200/graphql',
-            searchContent: 'http://localhost:4200/graphql',
-            label: 'http://localhost:4200/graphql',
-            count: 2_320_123,
-          },
-        ]}
+        options={filterOptions['http.url']}
         selectedValues={filterSelector('http.url')}
         onChange={updateFilter('http.url')}
       />
@@ -1426,194 +1682,192 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
 
   return (
     <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
-      <TooltipProvider>
-        <SheetHeader className="relative border-b border-gray-800 p-4">
-          <div className="flex items-center justify-between">
-            <SheetTitle className="text-lg font-medium text-white">
-              {trace.operationName}
-              <span className="text-muted-foreground ml-2 font-mono font-normal">
-                {trace.operationHash.substring(0, 4)}
-              </span>
-            </SheetTitle>
-          </div>
-          <SheetDescription className="mt-1 text-xs text-gray-400">
-            Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
-          </SheetDescription>
-          <div className="mt-2 flex items-center gap-3 text-xs">
-            <div className="flex items-center gap-1">
-              <Clock className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
-            </div>
-            <Badge
-              variant="outline"
-              className={cn(
-                'rounded-sm border-0 px-1 font-medium uppercase',
-                trace.status === 'ok'
-                  ? 'bg-green-900/30 text-green-400'
-                  : 'bg-red-900/30 text-red-400',
-              )}
-            >
-              {trace.status}
-            </Badge>
-            <span className="font-mono uppercase text-gray-300">
-              {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
+      <SheetHeader className="relative border-b border-gray-800 p-4">
+        <div className="flex items-center justify-between">
+          <SheetTitle className="text-lg font-medium text-white">
+            {trace.operationName}
+            <span className="text-muted-foreground ml-2 font-mono font-normal">
+              {trace.operationHash.substring(0, 4)}
             </span>
+          </SheetTitle>
+        </div>
+        <SheetDescription className="mt-1 text-xs text-gray-400">
+          Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
+        </SheetDescription>
+        <div className="mt-2 flex items-center gap-3 text-xs">
+          <div className="flex items-center gap-1">
+            <Clock className="h-3 w-3 text-gray-400" />
+            <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
           </div>
-          <Button asChild variant="outline" size="sm">
-            <Link
-              to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
-              className="absolute bottom-4 right-4"
-            >
-              <ExternalLinkIcon className="mr-1 h-3 w-3" />
-              Full Trace
-            </Link>
-          </Button>
-        </SheetHeader>
-        <div className="h-[calc(100vh-113px)]">
-          <ResizablePanelGroup direction="vertical">
-            <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
-              <WidthSyncProvider defaultWidth={251}>
-                <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
-              </WidthSyncProvider>
-            </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
-              <div className="flex h-full flex-col">
-                <div className="sticky top-0 z-10 border-b border-gray-800">
-                  <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
-                    <TabButton
-                      isActive={activeView === 'attributes'}
-                      onClick={() => setActiveView('attributes')}
-                    >
-                      <div className="flex items-center gap-x-2">
-                        <div>Attributes</div>
-                        <div>
-                          <Badge
-                            variant="secondary"
-                            className="rounded-md px-2 py-0.5 text-[10px] font-thin"
-                          >
-                            7
-                          </Badge>
-                        </div>
-                      </div>
-                    </TabButton>
-                    <TabButton
-                      isActive={activeView === 'events'}
-                      onClick={() => setActiveView('events')}
-                    >
-                      <div className="flex items-center gap-x-2">
-                        <div>Events</div>
-                        <div>
-                          <Badge
-                            variant="secondary"
-                            className="rounded-md px-2 py-0.5 text-[10px] font-thin"
-                          >
-                            3
-                          </Badge>
-                        </div>
-                      </div>
-                    </TabButton>
-                    <TabButton
-                      isActive={activeView === 'operation'}
-                      onClick={() => setActiveView('operation')}
-                    >
-                      <div className="flex items-center gap-x-2">
-                        <div>Operation</div>
+          <Badge
+            variant="outline"
+            className={cn(
+              'rounded-sm border-0 px-1 font-medium uppercase',
+              trace.status === 'ok'
+                ? 'bg-green-900/30 text-green-400'
+                : 'bg-red-900/30 text-red-400',
+            )}
+          >
+            {trace.status}
+          </Badge>
+          <span className="font-mono uppercase text-gray-300">
+            {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
+          </span>
+        </div>
+        <Button asChild variant="outline" size="sm">
+          <Link
+            to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
+            className="absolute bottom-4 right-4"
+          >
+            <ExternalLinkIcon className="mr-1 h-3 w-3" />
+            Full Trace
+          </Link>
+        </Button>
+      </SheetHeader>
+      <div className="h-[calc(100vh-113px)]">
+        <ResizablePanelGroup direction="vertical">
+          <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
+            <WidthSyncProvider defaultWidth={251}>
+              <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
+            </WidthSyncProvider>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
+            <div className="flex h-full flex-col">
+              <div className="sticky top-0 z-10 border-b border-gray-800">
+                <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+                  <TabButton
+                    isActive={activeView === 'attributes'}
+                    onClick={() => setActiveView('attributes')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Attributes</div>
+                      <div>
+                        <Badge
+                          variant="secondary"
+                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                        >
+                          7
+                        </Badge>
                       </div>
-                    </TabButton>
-                  </div>
-                </div>
-                <ScrollArea className="relative grow">
-                  <div className="h-full">
-                    {activeView === 'attributes' ? (
+                    </div>
+                  </TabButton>
+                  <TabButton
+                    isActive={activeView === 'events'}
+                    onClick={() => setActiveView('events')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Events</div>
                       <div>
-                        {attributes.length > 0 ? (
-                          <div>
-                            {attributes.map((attr, index) => (
-                              <div
-                                key={index}
-                                className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
-                              >
-                                <div className="text-gray-400">{attr.name}</div>
-                                <div className="font-mono text-white">{attr.value}</div>
-                              </div>
-                            ))}
-                          </div>
-                        ) : (
-                          <div className="py-4 text-center">
-                            <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
-                            <p className="text-xs text-gray-500">
-                              No attributes found for this trace
-                            </p>
-                          </div>
-                        )}
+                        <Badge
+                          variant="secondary"
+                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                        >
+                          3
+                        </Badge>
                       </div>
-                    ) : null}
-                    {activeView === 'events' ? (
-                      <div className="p-4">
-                        <div className="space-y-2">
-                          {[
-                            {
-                              code: 'DB_CONNECTION_ERROR',
-                              message: 'Connection to database timed out after 5 seconds',
-                              stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
-                            },
-                            {
-                              code: 'GRAPHQL_PARSE_FAILED',
-                              message: 'Sent GraphQL Operation cannot be parsed',
-                            },
-                            {
-                              code: 'TIMEOUT_ERROR',
-                              message: 'Operation timed out after 10 seconds',
-                            },
-                          ].map((exception, index) => (
+                    </div>
+                  </TabButton>
+                  <TabButton
+                    isActive={activeView === 'operation'}
+                    onClick={() => setActiveView('operation')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Operation</div>
+                    </div>
+                  </TabButton>
+                </div>
+              </div>
+              <ScrollArea className="relative grow">
+                <div className="h-full">
+                  {activeView === 'attributes' ? (
+                    <div>
+                      {attributes.length > 0 ? (
+                        <div>
+                          {attributes.map((attr, index) => (
                             <div
                               key={index}
-                              className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
+                              className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
                             >
-                              <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
-                                <span className="font-mono text-xs font-medium text-red-300">
-                                  {exception.code}
-                                </span>
-                                <Badge
-                                  variant="outline"
-                                  className="border-red-700 bg-red-950 text-[10px] text-red-300"
-                                >
-                                  Exception
-                                </Badge>
-                              </div>
-                              <div className="p-3 text-xs">
-                                <p className="text-gray-300">{exception.message}</p>
-                                {exception.stacktrace && (
-                                  <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
-                                    {exception.stacktrace}
-                                  </pre>
-                                )}
-                              </div>
+                              <div className="text-gray-400">{attr.name}</div>
+                              <div className="font-mono text-white">{attr.value}</div>
                             </div>
                           ))}
                         </div>
+                      ) : (
+                        <div className="py-4 text-center">
+                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                          <p className="text-xs text-gray-500">
+                            No attributes found for this trace
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  ) : null}
+                  {activeView === 'events' ? (
+                    <div className="p-4">
+                      <div className="space-y-2">
+                        {[
+                          {
+                            code: 'DB_CONNECTION_ERROR',
+                            message: 'Connection to database timed out after 5 seconds',
+                            stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
+                          },
+                          {
+                            code: 'GRAPHQL_PARSE_FAILED',
+                            message: 'Sent GraphQL Operation cannot be parsed',
+                          },
+                          {
+                            code: 'TIMEOUT_ERROR',
+                            message: 'Operation timed out after 10 seconds',
+                          },
+                        ].map((exception, index) => (
+                          <div
+                            key={index}
+                            className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
+                          >
+                            <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
+                              <span className="font-mono text-xs font-medium text-red-300">
+                                {exception.code}
+                              </span>
+                              <Badge
+                                variant="outline"
+                                className="border-red-700 bg-red-950 text-[10px] text-red-300"
+                              >
+                                Exception
+                              </Badge>
+                            </div>
+                            <div className="p-3 text-xs">
+                              <p className="text-gray-300">{exception.message}</p>
+                              {exception.stacktrace && (
+                                <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
+                                  {exception.stacktrace}
+                                </pre>
+                              )}
+                            </div>
+                          </div>
+                        ))}
                       </div>
-                    ) : null}
-                    {activeView === 'operation' ? (
-                      <div className="absolute bottom-0 top-0 w-full">
-                        <GraphQLHighlight
-                          height={'100%'}
-                          options={{
-                            fontSize: 10,
-                            minimap: { enabled: false },
-                          }}
-                          code={fetchProductsQueryString}
-                        />
-                      </div>
-                    ) : null}
-                  </div>
-                </ScrollArea>
-              </div>
-            </ResizablePanel>
-          </ResizablePanelGroup>
-        </div>
-      </TooltipProvider>
+                    </div>
+                  ) : null}
+                  {activeView === 'operation' ? (
+                    <div className="absolute bottom-0 top-0 w-full">
+                      <GraphQLHighlight
+                        height={'100%'}
+                        options={{
+                          fontSize: 10,
+                          minimap: { enabled: false },
+                        }}
+                        code={fetchProductsQueryString}
+                      />
+                    </div>
+                  ) : null}
+                </div>
+              </ScrollArea>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
     </SheetContent>
   );
 }
@@ -1790,14 +2044,13 @@ function TabButton(props: { isActive: boolean; onClick(): void; children: ReactN
   );
 }
 
-function TraceResize() {
+function TraceResize(props: { minWidth: number; maxWidth: number }) {
   const [width, setWidth] = useWidthSync();
   const [isDragging, setIsDragging] = useState(false);
   const handleRef = useRef<HTMLDivElement>(null);
   const startPosRef = useRef(0);
   const startWidthRef = useRef(0);
-  const minWidth = 175;
-  const maxWidth = 450;
+  const { minWidth, maxWidth } = props;
 
   // Handle the start of dragging
   const handleDragStart = useCallback(
@@ -1891,14 +2144,17 @@ function TraceTree(props: {
   leftPanelWidth: number;
 }) {
   const [width] = useWidthSync();
+  const minWidth = 175;
+  const maxWidth = 450;
   const serviceNames = listServiceNames(props.rootSpan);
   const serviceNameToColorMap = Object.fromEntries(
     serviceNames.map((name, index) => [name, colors[index % colors.length]]),
   );
+  const containerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="relative">
-      <TraceResize />
+    <div className="relative" ref={containerRef}>
+      <TraceResize minWidth={minWidth} maxWidth={maxWidth} />
       <Node
         key={props.rootSpan.id}
         level={0}
@@ -2043,82 +2299,84 @@ function Node(props: NodeProps) {
               isDimmed ? 'opacity-25' : '',
             )}
           >
-            <Tooltip disableHoverableContent delayDuration={100}>
-              <TooltipTrigger asChild>
-                <div
-                  className={cn('absolute block h-6 min-w-[1px] select-none rounded-sm')}
-                  style={{
-                    left: `min(${leftPositionPercentage}%, 100% - 1px)`,
-                    width: `${widthPercentage}%`,
-                    backgroundColor: color,
-                  }}
-                >
+            <TooltipProvider>
+              <Tooltip disableHoverableContent delayDuration={100}>
+                <TooltipTrigger asChild>
                   <div
-                    className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
+                    className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
                     style={{
-                      fontSize: '11px',
-                      ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+                      left: `min(${leftPositionPercentage}%, 100% - 1px)`,
+                      width: `${widthPercentage}%`,
+                      backgroundColor: color,
                     }}
                   >
-                    {props.span.duration}ms
-                  </div>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent
-                side="bottom"
-                className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
-              >
-                {/* Content */}
-                <div className="space-y-3">
-                  <div className="grid grid-cols-2 gap-y-2">
-                    <div className="text-gray-400">Duration</div>
-                    <div className="text-right font-mono">
-                      <span>{props.span.duration}ms</span>
+                    <div
+                      className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
+                      style={{
+                        fontSize: '11px',
+                        ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+                      }}
+                    >
+                      {props.span.duration}ms
                     </div>
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
+                >
+                  {/* Content */}
+                  <div className="space-y-3">
+                    <div className="grid grid-cols-2 gap-y-2">
+                      <div className="text-gray-400">Duration</div>
+                      <div className="text-right font-mono">
+                        <span>{props.span.duration}ms</span>
+                      </div>
 
-                    <div className="text-gray-400">Started At</div>
-                    <div className="text-right font-mono">{props.span.startedAt}ms</div>
+                      <div className="text-gray-400">Started At</div>
+                      <div className="text-right font-mono">{props.span.startedAt}ms</div>
 
-                    <div className="text-gray-400">% of Total</div>
-                    <div className="text-right font-mono">{percentageOfTotal}%</div>
+                      <div className="text-gray-400">% of Total</div>
+                      <div className="text-right font-mono">{percentageOfTotal}%</div>
 
-                    <div className="col-span-2">
-                      {/* Timeline visualization */}
-                      <div>
-                        <div className="h-[2px] w-full overflow-hidden bg-gray-800">
-                          <div
-                            className="h-full"
-                            style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
-                          />
+                      <div className="col-span-2">
+                        {/* Timeline visualization */}
+                        <div>
+                          <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                            <div
+                              className="h-full"
+                              style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
+                            />
+                          </div>
                         </div>
                       </div>
-                    </div>
 
-                    {percentageOfParent === null ? null : (
-                      <>
-                        <div className="text-gray-400">% of Parent</div>
-                        <div className="text-right font-mono">{percentageOfParent}%</div>
-
-                        <div className="col-span-2">
-                          {/* Timeline visualization */}
-                          <div>
-                            <div className="h-[2px] w-full overflow-hidden bg-gray-800">
-                              <div
-                                className="h-full"
-                                style={{
-                                  width: `${percentageOfParent}%`,
-                                  backgroundColor: parentColor,
-                                }}
-                              />
+                      {percentageOfParent === null ? null : (
+                        <>
+                          <div className="text-gray-400">% of Parent</div>
+                          <div className="text-right font-mono">{percentageOfParent}%</div>
+
+                          <div className="col-span-2">
+                            {/* Timeline visualization */}
+                            <div>
+                              <div className="h-[2px] w-full overflow-hidden bg-gray-800">
+                                <div
+                                  className="h-full"
+                                  style={{
+                                    width: `${percentageOfParent}%`,
+                                    backgroundColor: parentColor,
+                                  }}
+                                />
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      </>
-                    )}
+                        </>
+                      )}
+                    </div>
                   </div>
-                </div>
-              </TooltipContent>
-            </Tooltip>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </div>
         </div>
       </div>

From 927cca1e68b71fe8ef399573c0c0f8e86027d48a Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 21 Mar 2025 10:10:53 +0100
Subject: [PATCH 004/123] comments

---
 packages/web/app/src/pages/target-insights-new.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/web/app/src/pages/target-insights-new.tsx b/packages/web/app/src/pages/target-insights-new.tsx
index 1d1fc0831b..9e5e2b923f 100644
--- a/packages/web/app/src/pages/target-insights-new.tsx
+++ b/packages/web/app/src/pages/target-insights-new.tsx
@@ -834,6 +834,8 @@ export const columns: ColumnDef<Trace>[] = [
               side="bottom"
               className="cursor-auto overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
               onClick={e => {
+                // Prevent the click event from bubbling up to the row,
+                // which would trigger the sheet with trace details to open
                 e.stopPropagation();
               }}
             >
@@ -1403,6 +1405,7 @@ function Filters() {
     'http.url': [],
   });
 
+  // Stores the update handlers in a ref to prevent unnecessary re-renders
   const updateHandlersRef = useRef(new Map<FilterKeys, (value: any) => void>());
   const updateFilter = useCallback(
     <$Key extends FilterKeys>(key: $Key): ((value: FilterState[$Key]) => void) => {

From d41b208735d49c8b5d0b92fa9a6de8c5a2a04020 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 21 Mar 2025 10:12:52 +0100
Subject: [PATCH 005/123] cleanups

---
 .../web/app/src/pages/target-insights-new.tsx | 64 ++++++-------------
 1 file changed, 18 insertions(+), 46 deletions(-)

diff --git a/packages/web/app/src/pages/target-insights-new.tsx b/packages/web/app/src/pages/target-insights-new.tsx
index 9e5e2b923f..57b8032729 100644
--- a/packages/web/app/src/pages/target-insights-new.tsx
+++ b/packages/web/app/src/pages/target-insights-new.tsx
@@ -1,11 +1,9 @@
-import { Fragment, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { addDays, formatDate, formatISO, parse as parseDate } from 'date-fns';
+import { Fragment, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import {
   AlertTriangle,
   ArrowUpDown,
-  CalendarIcon,
-  ChevronRight,
   Clock,
   ExternalLinkIcon,
   FilterIcon,
@@ -17,27 +15,15 @@ import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
 import { Meta } from '@/components/ui/meta';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import {
   Sheet,
   SheetContent,
@@ -48,13 +34,9 @@ import {
 import {
   Sidebar,
   SidebarContent,
-  SidebarGroup,
-  SidebarGroupContent,
   SidebarGroupLabel,
   SidebarInset,
-  SidebarMenu,
   SidebarProvider,
-  SidebarSeparator,
 } from '@/components/ui/sidebar';
 import {
   Table,
@@ -67,7 +49,6 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { formatDuration } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
-import * as SliderPrimitive from '@radix-ui/react-slider';
 import { Link } from '@tanstack/react-router';
 import {
   ColumnDef,
@@ -83,7 +64,6 @@ import {
 } from '@tanstack/react-table';
 import {
   DurationFilter,
-  FilterInput,
   MultiInputFilter,
   MultiSelectFilter,
   TimelineFilter,
@@ -268,17 +248,9 @@ const chartConfig = {
 } satisfies ChartConfig;
 
 function Traffic() {
-  const total = useMemo(
-    () => ({
-      ok: chartData.reduce((acc, curr) => acc + curr.ok, 0),
-      error: chartData.reduce((acc, curr) => acc + curr.error, 0),
-    }),
-    [],
-  );
-
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
-  const [zoomedData, setZoomedData] = useState<typeof data | null>(null);
+  const [_, setZoomedData] = useState<typeof data | null>(null);
   const [isSelecting, setIsSelecting] = useState(false);
   const chartContainerRef = useRef<HTMLDivElement>(null);
 
@@ -1878,21 +1850,21 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
 function SearchBar(props: { onFiltersOpenChange: () => void }) {
   return null;
 
-  return (
-    <div className="flex gap-x-4">
-      <Button
-        variant="outline"
-        className="bg-background size-10 p-0"
-        onClick={props.onFiltersOpenChange}
-      >
-        <FilterIcon className="size-4" />
-      </Button>
-      <div className="relative w-full">
-        <SearchIcon className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
-        <Input type="search" className="pl-9" placeholder="Search..." {...props} />
-      </div>
-    </div>
-  );
+  // return (
+  //   <div className="flex gap-x-4">
+  //     <Button
+  //       variant="outline"
+  //       className="bg-background size-10 p-0"
+  //       onClick={props.onFiltersOpenChange}
+  //     >
+  //       <FilterIcon className="size-4" />
+  //     </Button>
+  //     <div className="relative w-full">
+  //       <SearchIcon className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
+  //       <Input type="search" className="pl-9" placeholder="Search..." {...props} />
+  //     </div>
+  //   </div>
+  // );
 }
 
 function TargetInsightsNewPageContent() {

From da30838abd3b916f787f46f33f8dfcb549a095fb Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 21 Mar 2025 10:33:05 +0100
Subject: [PATCH 006/123] Add react-scan in local development mode

---
 packages/web/app/vite.config.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/vite.config.ts b/packages/web/app/vite.config.ts
index 09c6a2e848..d64794a11c 100644
--- a/packages/web/app/vite.config.ts
+++ b/packages/web/app/vite.config.ts
@@ -1,13 +1,28 @@
 import { resolve } from 'node:path';
-import type { UserConfig } from 'vite';
+import type { Plugin, UserConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import react from '@vitejs/plugin-react';
 
 const __dirname = new URL('.', import.meta.url).pathname;
 
+// Add react-scan in local development mode
+const reactScanPlugin: Plugin = {
+  name: 'react-scan',
+  transformIndexHtml(html, ctx) {
+    if (ctx.server?.config.command === 'serve') {
+      return html.replace(
+        '<head>',
+        '<head><script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>',
+      );
+    }
+
+    return html;
+  },
+};
+
 export default {
   root: __dirname,
-  plugins: [tsconfigPaths(), react()],
+  plugins: [tsconfigPaths(), react(), reactScanPlugin],
   build: {
     rollupOptions: {
       input: {

From 8d0fa79d550057a883d02225f6d12a3b9510f841 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Fri, 21 Mar 2025 13:11:33 +0100
Subject: [PATCH 007/123] asdasd

---
 packages/web/app/package.json                 |   4 +
 .../web/app/src/components/layouts/target.tsx |  59 +++-
 ...nsights-new-trace.tsx => target-trace.tsx} |   9 +-
 ...ew-filter.tsx => target-traces-filter.tsx} | 100 ++++---
 ...-new-width.tsx => target-traces-width.tsx} |  11 +-
 ...get-insights-new.tsx => target-traces.tsx} | 256 +++++++++++-------
 packages/web/app/src/router.tsx               |  69 ++++-
 pnpm-lock.yaml                                |  77 +++++-
 8 files changed, 416 insertions(+), 169 deletions(-)
 rename packages/web/app/src/pages/{target-insights-new-trace.tsx => target-trace.tsx} (99%)
 rename packages/web/app/src/pages/{target-insights-new-filter.tsx => target-traces-filter.tsx} (87%)
 rename packages/web/app/src/pages/{target-insights-new-width.tsx => target-traces-width.tsx} (91%)
 rename packages/web/app/src/pages/{target-insights-new.tsx => target-traces.tsx} (93%)

diff --git a/packages/web/app/package.json b/packages/web/app/package.json
index 2152884d72..015a11387e 100644
--- a/packages/web/app/package.json
+++ b/packages/web/app/package.json
@@ -72,6 +72,7 @@
     "@types/crypto-js": "^4.2.2",
     "@types/dompurify": "3.2.0",
     "@types/js-cookie": "3.0.6",
+    "@types/lodash.debounce": "4.0.9",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@types/react-highlight-words": "0.20.0",
@@ -103,10 +104,13 @@
     "js-cookie": "3.0.5",
     "json-schema-typed": "8.0.1",
     "json-schema-yup-transformer": "1.6.12",
+    "jsurl2": "2.2.0",
+    "lodash.debounce": "4.0.8",
     "lucide-react": "0.469.0",
     "mini-svg-data-uri": "1.4.4",
     "monaco-editor": "0.50.0",
     "monaco-themes": "0.4.4",
+    "query-string": "9.1.1",
     "react": "18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "18.3.1",
diff --git a/packages/web/app/src/components/layouts/target.tsx b/packages/web/app/src/components/layouts/target.tsx
index c138118ab0..77ee1de929 100644
--- a/packages/web/app/src/components/layouts/target.tsx
+++ b/packages/web/app/src/components/layouts/target.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useMemo, useState } from 'react';
+import { createContext, ReactElement, ReactNode, useContext, useMemo, useState } from 'react';
 import { LinkIcon } from 'lucide-react';
 import { useQuery } from 'urql';
 import { Button } from '@/components/ui/button';
@@ -39,11 +39,48 @@ export enum Page {
   Checks = 'checks',
   History = 'history',
   Insights = 'insights',
+  Traces = 'traces',
   Laboratory = 'laboratory',
   Apps = 'apps',
   Settings = 'settings',
 }
 
+type TargetReference = {
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+};
+
+const TargetReferenceContext = createContext<TargetReference | undefined>(undefined);
+
+type TargetReferenceProviderProps = {
+  children: ReactNode;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+};
+
+export const TargetReferenceProvider = ({
+  children,
+  organizationSlug,
+  projectSlug,
+  targetSlug,
+}: TargetReferenceProviderProps) => {
+  return (
+    <TargetReferenceContext.Provider value={{ organizationSlug, projectSlug, targetSlug }}>
+      {children}
+    </TargetReferenceContext.Provider>
+  );
+};
+
+export const useTargetReference = () => {
+  const context = useContext(TargetReferenceContext);
+  if (!context) {
+    throw new Error('useTargetReference must be used within a TargetReferenceProvider');
+  }
+  return context;
+};
+
 const TargetLayoutQuery = graphql(`
   query TargetLayoutQuery($organizationSlug: String!, $projectSlug: String!, $targetSlug: String!) {
     me {
@@ -113,7 +150,11 @@ export const TargetLayout = ({
   useLastVisitedOrganizationWriter(currentOrganization?.slug);
 
   return (
-    <>
+    <TargetReferenceProvider
+      organizationSlug={props.organizationSlug}
+      projectSlug={props.projectSlug}
+      targetSlug={props.targetSlug}
+    >
       <header>
         <div className="container flex h-[--header-height] items-center justify-between">
           <div className="flex flex-row items-center gap-4">
@@ -207,6 +248,18 @@ export const TargetLayout = ({
                         Insights
                       </Link>
                     </TabsTrigger>
+                    <TabsTrigger variant="menu" value={Page.Traces} asChild>
+                      <Link
+                        to="/$organizationSlug/$projectSlug/$targetSlug/traces"
+                        params={{
+                          organizationSlug: props.organizationSlug,
+                          projectSlug: props.projectSlug,
+                          targetSlug: props.targetSlug,
+                        }}
+                      >
+                        Traces
+                      </Link>
+                    </TabsTrigger>
                     {currentTarget.viewerCanViewAppDeployments && (
                       <TabsTrigger variant="menu" value={Page.Apps} asChild>
                         <Link
@@ -284,7 +337,7 @@ export const TargetLayout = ({
           </div>
         </>
       )}
-    </>
+    </TargetReferenceProvider>
   );
 };
 
diff --git a/packages/web/app/src/pages/target-insights-new-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
similarity index 99%
rename from packages/web/app/src/pages/target-insights-new-trace.tsx
rename to packages/web/app/src/pages/target-trace.tsx
index 11c4be4d69..e979bab3d5 100644
--- a/packages/web/app/src/pages/target-insights-new-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -9,7 +9,7 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/componen
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import { useWidthSync, WidthSyncProvider } from './target-insights-new-width';
+import { useWidthSync, WidthSyncProvider } from './target-traces-width';
 
 const rootSpan: SpanProps = {
   id: 'root',
@@ -1247,19 +1247,20 @@ function TargetInsightsNewPageContent() {
   return <TraceSheet trace={traceInSheet} />;
 }
 
-export function TargetInsightsNewTracePage(props: {
+export function TargetTracePage(props: {
+  traceId: string;
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
 }) {
   return (
     <>
-      <Meta title="Trace 12323134" />
+      <Meta title={`Trace ${props.traceId}`} />
       <TargetLayout
         organizationSlug={props.organizationSlug}
         projectSlug={props.projectSlug}
         targetSlug={props.targetSlug}
-        page={Page.Insights}
+        page={Page.Traces}
         className="flex flex-col"
       >
         <div className="flex flex-1 flex-col">
diff --git a/packages/web/app/src/pages/target-insights-new-filter.tsx b/packages/web/app/src/pages/target-traces-filter.tsx
similarity index 87%
rename from packages/web/app/src/pages/target-insights-new-filter.tsx
rename to packages/web/app/src/pages/target-traces-filter.tsx
index fbc1d0fcb3..3bc4968070 100644
--- a/packages/web/app/src/pages/target-insights-new-filter.tsx
+++ b/packages/web/app/src/pages/target-traces-filter.tsx
@@ -1,4 +1,5 @@
 import {
+  ChangeEventHandler,
   ComponentPropsWithoutRef,
   ElementRef,
   forwardRef,
@@ -7,10 +8,12 @@ import {
   memo,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
 import { addDays, formatDate } from 'date-fns';
+import debounce from 'lodash.debounce';
 import {
   CalendarIcon,
   CheckIcon,
@@ -88,27 +91,25 @@ export function FilterTitle(props: { children: ReactNode; changes?: number; onRe
       className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
     >
       <CollapsibleTrigger>
-        <>
-          <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-          {props.children}
-          {props.changes ? (
-            <Button
-              variant="secondary"
-              size="sm"
-              className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
-              onClick={e => {
-                e.preventDefault();
-                props.onReset();
-              }}
-              asChild
-            >
-              <>
-                <CircleXIcon className="hidden size-3 group-hover:block" />
-                <span className="block group-hover:hidden">{props.changes}</span>
-              </>
-            </Button>
-          ) : null}
-        </>
+        <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+        {props.children}
+        {props.changes ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
+            onClick={e => {
+              e.preventDefault();
+              props.onReset();
+            }}
+            asChild
+          >
+            <div>
+              <CircleXIcon className="hidden size-3 group-hover:block" />
+              <span className="block group-hover:hidden">{props.changes}</span>
+            </div>
+          </Button>
+        ) : null}
       </CollapsibleTrigger>
     </SidebarGroupLabel>
   );
@@ -345,18 +346,51 @@ export const DurationFilter = memo(
     const minValue = 0;
     const maxValue = 100000;
     const defaultValues: [number, number] = [minValue, maxValue];
-    const values: [number, number] = props.value.length ? props.value : defaultValues;
+    const [values, setValues] = useState<[number, number]>(
+      props.value.length ? props.value : defaultValues,
+    );
 
-    const handleSliderChange = (newValues: [number, number]) => {
-      props.onChange(newValues);
-    };
+    const handleStateChange = useMemo(
+      () =>
+        debounce((newValues: [number, number]) => {
+          props.onChange(newValues);
+        }, 1000),
+      [props.onChange],
+    );
+
+    const handleSliderChange = useCallback(
+      (newValues: [number, number]) => {
+        handleStateChange(newValues);
+        setValues(newValues);
+      },
+      [handleStateChange, setValues],
+    );
+
+    useEffect(() => {
+      return () => handleStateChange.cancel();
+    }, [handleStateChange]);
+
+    const handleInputChange = useCallback(
+      (index: number, value: string) => {
+        const numValue = Number.parseInt(value) || minValue;
+        const newValues: [number, number] = [...values];
+        newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
 
-    const handleInputChange = (index: number, value: string) => {
-      const numValue = Number.parseInt(value) || minValue;
-      const newValues: [number, number] = [...values];
-      newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
-      props.onChange(newValues);
-    };
+        handleStateChange(newValues);
+        setValues(newValues);
+      },
+      [handleStateChange, setValues],
+    );
+
+    const handleMinInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      e => handleInputChange(0, e.target.value),
+      [handleInputChange],
+    );
+
+    const handleMaxInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      e => handleInputChange(1, e.target.value),
+      [handleInputChange],
+    );
 
     return (
       <Filter name="Duration">
@@ -374,7 +408,7 @@ export const DurationFilter = memo(
                   <FilterInput
                     type="number"
                     value={values[0]}
-                    onChange={e => handleInputChange(0, e.target.value)}
+                    onChange={handleMinInputChange}
                     className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
                   />
                   <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
@@ -388,7 +422,7 @@ export const DurationFilter = memo(
                   <FilterInput
                     type="number"
                     value={values[1]}
-                    onChange={e => handleInputChange(1, e.target.value)}
+                    onChange={handleMaxInputChange}
                     className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
                   />
                   <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
diff --git a/packages/web/app/src/pages/target-insights-new-width.tsx b/packages/web/app/src/pages/target-traces-width.tsx
similarity index 91%
rename from packages/web/app/src/pages/target-insights-new-width.tsx
rename to packages/web/app/src/pages/target-traces-width.tsx
index fdcd1bfd14..5fec558a37 100644
--- a/packages/web/app/src/pages/target-insights-new-width.tsx
+++ b/packages/web/app/src/pages/target-traces-width.tsx
@@ -1,13 +1,4 @@
-import {
-  createContext,
-  FC,
-  ReactNode,
-  useCallback,
-  useContext,
-  useDeferredValue,
-  useRef,
-  useState,
-} from 'react';
+import { createContext, FC, ReactNode, useCallback, useContext, useRef, useState } from 'react';
 
 interface WidthSyncContextType {
   width: number;
diff --git a/packages/web/app/src/pages/target-insights-new.tsx b/packages/web/app/src/pages/target-traces.tsx
similarity index 93%
rename from packages/web/app/src/pages/target-insights-new.tsx
rename to packages/web/app/src/pages/target-traces.tsx
index 57b8032729..607c3b4c7f 100644
--- a/packages/web/app/src/pages/target-insights-new.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,18 +1,11 @@
 import { Fragment, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import {
-  AlertTriangle,
-  ArrowUpDown,
-  Clock,
-  ExternalLinkIcon,
-  FilterIcon,
-  SearchIcon,
-  XIcon,
-} from 'lucide-react';
+import { AlertTriangle, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
+import { z } from 'zod';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
-import { Page, TargetLayout } from '@/components/layouts/target';
+import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
@@ -49,26 +42,23 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { formatDuration } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
-import { Link } from '@tanstack/react-router';
+import { Link, useRouter } from '@tanstack/react-router';
 import {
   ColumnDef,
-  ColumnFiltersState,
   flexRender,
   getCoreRowModel,
-  getFilteredRowModel,
   getPaginationRowModel,
   getSortedRowModel,
-  SortingState,
+  OnChangeFn,
   useReactTable,
-  VisibilityState,
 } from '@tanstack/react-table';
 import {
   DurationFilter,
   MultiInputFilter,
   MultiSelectFilter,
   TimelineFilter,
-} from './target-insights-new-filter';
-import { useWidthSync, WidthSyncProvider } from './target-insights-new-width';
+} from './target-traces-filter';
+import { useWidthSync, WidthSyncProvider } from './target-traces-width';
 
 const rootSpan: SpanProps = {
   id: 'root',
@@ -750,12 +740,19 @@ export const columns: ColumnDef<Trace>[] = [
     accessorKey: 'id',
     header: () => <div className="pl-2 text-left">Trace ID</div>,
     cell: ({ row }) => {
+      const targetRef = useTargetReference();
       const traceId = row.getValue('id') as string;
 
       return (
         <div className="px-2 text-left font-mono text-xs font-medium">
           <Link
-            to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
+            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+            params={{
+              organizationSlug: targetRef.organizationSlug,
+              projectSlug: targetRef.projectSlug,
+              targetSlug: targetRef.targetSlug,
+              traceId,
+            }}
             className="group block w-[6ch] overflow-hidden whitespace-nowrap text-white"
           >
             <span>
@@ -991,35 +988,92 @@ export const columns: ColumnDef<Trace>[] = [
   },
 ];
 
-function TracesList() {
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [pagination, setPagination] = useState({
-    pageIndex: 0,
-    pageSize: 20,
-  });
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = useState({});
+const TargetTracesSortShape = z
+  .array(
+    z.object({
+      desc: z.coerce.boolean(),
+      id: z.string(),
+    }),
+  )
+  .default([
+    {
+      desc: true,
+      id: 'timestamp',
+    },
+  ]);
+export const TargetTracesSort = {
+  shape: TargetTracesSortShape,
+};
+type SortState = z.infer<typeof TargetTracesSortShape>;
+type SortProps = {
+  sorting: SortState;
+};
+
+const TargetTracesPaginationShape = z.object({
+  pageIndex: z.number().min(0).default(0),
+  pageSize: z.number().min(10).max(100).default(20),
+});
+export const TargetTracesPagination = {
+  shape: TargetTracesPaginationShape,
+};
+
+type PaginationState = z.infer<typeof TargetTracesPaginationShape>;
+type PaginationProps = {
+  pagination: PaginationState;
+};
+
+function TracesList(props: SortProps & PaginationProps) {
+  // const [sorting, setSorting] = useState<SortingState>([]);
+  // const [pagination, setPagination] = useState({
+  //   pageIndex: 0,
+  //   pageSize: 20,
+  // });
   const [traceInSheet, setTraceInSheet] = useState<Trace | null>(null);
+  const router = useRouter();
+
+  const onSortingChange = useCallback<OnChangeFn<SortState>>(
+    updater => {
+      const value = typeof updater === 'function' ? updater(props.sorting) : updater;
+
+      void router.navigate({
+        search(params) {
+          return {
+            ...params,
+            sort: value,
+          };
+        },
+      });
+    },
+    [router],
+  );
+
+  const onPaginationChange = useCallback<OnChangeFn<PaginationState>>(
+    updater => {
+      const value = typeof updater === 'function' ? updater(props.pagination) : updater;
+
+      void router.navigate({
+        search(params) {
+          return {
+            ...params,
+            pagination: value,
+          };
+        },
+      });
+    },
+    [router],
+  );
 
   const table = useReactTable({
     data,
     columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
+    onSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
+    onPaginationChange,
     state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      pagination,
+      sorting: props.sorting,
+      pagination: props.pagination,
     },
   });
 
@@ -1133,19 +1187,25 @@ function LabelWithBadge(props: {
   );
 }
 
-type FilterState = {
-  'trace.id': string[];
-  duration: [] | [number, number];
-  'graphql.status': string[];
-  'graphql.kind': string[];
-  'graphql.subgraph': string[];
-  'graphql.operation': string[];
-  'graphql.client': string[];
-  'http.status': string[];
-  'http.method': string[];
-  'http.host': string[];
-  'http.route': string[];
-  'http.url': string[];
+export const TargetTracesFilterState = z.object({
+  'trace.id': z.array(z.string()).default([]),
+  duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
+  'graphql.status': z.array(z.string()).default([]),
+  'graphql.kind': z.array(z.string()).default([]),
+  'graphql.subgraph': z.array(z.string()).default([]),
+  'graphql.operation': z.array(z.string()).default([]),
+  'graphql.client': z.array(z.string()).default([]),
+  'http.status': z.array(z.string()).default([]),
+  'http.method': z.array(z.string()).default([]),
+  'http.host': z.array(z.string()).default([]),
+  'http.route': z.array(z.string()).default([]),
+  'http.url': z.array(z.string()).default([]),
+});
+
+type FilterState = z.infer<typeof TargetTracesFilterState>;
+
+type FilterProps = {
+  filter: FilterState;
 };
 
 type FilterKeys = keyof FilterState;
@@ -1361,51 +1421,43 @@ const filterOptions = {
   ],
 };
 
-function Filters() {
-  const [filters, setFilters] = useState<FilterState>({
-    duration: [],
-    'trace.id': [],
-    'graphql.status': [],
-    'graphql.kind': [],
-    'graphql.subgraph': [],
-    'graphql.operation': [],
-    'graphql.client': [],
-    'http.status': [],
-    'http.method': [],
-    'http.host': [],
-    'http.route': [],
-    'http.url': [],
-  });
+function Filters(props: FilterProps) {
+  const filters = props.filter;
 
   // Stores the update handlers in a ref to prevent unnecessary re-renders
+  const router = useRouter();
   const updateHandlersRef = useRef(new Map<FilterKeys, (value: any) => void>());
   const updateFilter = useCallback(
     <$Key extends FilterKeys>(key: $Key): ((value: FilterState[$Key]) => void) => {
       if (!updateHandlersRef.current.has(key)) {
         const handler = (value: FilterState[$Key]) => {
-          setFilters(prev => ({ ...prev, [key]: value }));
+          void router.navigate({
+            search(params) {
+              return {
+                ...params,
+                filter: {
+                  ...('filter' in params ? params.filter : {}),
+                  [key]: value,
+                },
+              };
+            },
+          });
         };
         updateHandlersRef.current.set(key, handler);
       }
       return updateHandlersRef.current.get(key)!;
     },
-    [setFilters],
+    [router],
   );
 
   const resetFilters = () => {
-    setFilters({
-      duration: [],
-      'trace.id': [],
-      'graphql.status': [],
-      'graphql.kind': [],
-      'graphql.subgraph': [],
-      'graphql.operation': [],
-      'graphql.client': [],
-      'http.status': [],
-      'http.method': [],
-      'http.host': [],
-      'http.route': [],
-      'http.url': [],
+    void router.navigate({
+      search(params) {
+        return {
+          ...params,
+          filter: {},
+        };
+      },
     });
   };
 
@@ -1608,8 +1660,10 @@ function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
   );
 }
 
-function TraceSheet({ trace }: { trace: Trace | null }) {
+function TraceSheet(props: { trace: Trace | null }) {
+  const targetRef = useTargetReference();
   const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
+  const trace = props.trace;
 
   if (!trace) {
     return null;
@@ -1691,7 +1745,13 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
         </div>
         <Button asChild variant="outline" size="sm">
           <Link
-            to="/$organizationSlug/$projectSlug/$targetSlug/insights-new/trace"
+            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+            params={{
+              organizationSlug: targetRef.organizationSlug,
+              projectSlug: targetRef.projectSlug,
+              targetSlug: targetRef.targetSlug,
+              traceId: trace.id,
+            }}
             className="absolute bottom-4 right-4"
           >
             <ExternalLinkIcon className="mr-1 h-3 w-3" />
@@ -1867,7 +1927,7 @@ function SearchBar(props: { onFiltersOpenChange: () => void }) {
   // );
 }
 
-function TargetInsightsNewPageContent() {
+function TargetInsightsNewPageContent(props: SortProps & PaginationProps & FilterProps) {
   const [filtersOpen, setFiltersOpen] = useState(true);
 
   return (
@@ -1876,7 +1936,7 @@ function TargetInsightsNewPageContent() {
         {filtersOpen ? (
           <Sidebar collapsible="none" className="bg-transparent">
             <SidebarContent>
-              <Filters />
+              <Filters filter={props.filter} />
             </SidebarContent>
           </Sidebar>
         ) : null}
@@ -1886,7 +1946,7 @@ function TargetInsightsNewPageContent() {
               <SearchBar onFiltersOpenChange={() => setFiltersOpen(isOpen => !isOpen)} />
               <Traffic />
             </div>
-            <TracesList />
+            <TracesList sorting={props.sorting} pagination={props.pagination} />
           </div>
         </SidebarInset>
       </SidebarProvider>
@@ -1894,21 +1954,29 @@ function TargetInsightsNewPageContent() {
   );
 }
 
-export function TargetInsightsNewPage(props: {
-  organizationSlug: string;
-  projectSlug: string;
-  targetSlug: string;
-}) {
+export function TargetTracesPage(
+  props: {
+    organizationSlug: string;
+    projectSlug: string;
+    targetSlug: string;
+  } & SortProps &
+    PaginationProps &
+    FilterProps,
+) {
   return (
     <>
-      <Meta title="Insights" />
+      <Meta title="Traces" />
       <TargetLayout
         organizationSlug={props.organizationSlug}
         projectSlug={props.projectSlug}
         targetSlug={props.targetSlug}
-        page={Page.Insights}
+        page={Page.Traces}
       >
-        <TargetInsightsNewPageContent />
+        <TargetInsightsNewPageContent
+          sorting={props.sorting}
+          pagination={props.pagination}
+          filter={props.filter}
+        />
       </TargetLayout>
     </>
   );
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 8a2ff3f5f5..48d5ae344f 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -1,4 +1,6 @@
 import { lazy, useCallback, useEffect } from 'react';
+import { parse as jsUrlParse, stringify as jsUrlStringify } from 'jsurl2';
+import qs from 'query-string';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { ToastContainer } from 'react-toastify';
 import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react';
@@ -19,6 +21,8 @@ import {
   createRouter,
   Navigate,
   Outlet,
+  parseSearchWith,
+  stringifySearchWith,
   useNavigate,
 } from '@tanstack/react-router';
 import { ErrorComponent } from './components/error';
@@ -71,11 +75,16 @@ import { TargetHistoryVersionPage } from './pages/target-history-version';
 import { TargetInsightsPage } from './pages/target-insights';
 import { TargetInsightsClientPage } from './pages/target-insights-client';
 import { TargetInsightsCoordinatePage } from './pages/target-insights-coordinate';
-import { TargetInsightsNewPage } from './pages/target-insights-new';
-import { TargetInsightsNewTracePage } from './pages/target-insights-new-trace';
 import { TargetInsightsOperationPage } from './pages/target-insights-operation';
 import { TargetLaboratoryPage } from './pages/target-laboratory';
 import { TargetSettingsPage, TargetSettingsPageEnum } from './pages/target-settings';
+import { TargetTracePage } from './pages/target-trace';
+import {
+  TargetTracesFilterState,
+  TargetTracesPage,
+  TargetTracesPagination,
+  TargetTracesSort,
+} from './pages/target-traces';
 
 SuperTokens.init(frontendConfig());
 if (env.sentry) {
@@ -648,28 +657,40 @@ const targetInsightsRoute = createRoute({
   },
 });
 
-const targetInsightsNewRoute = createRoute({
+const TargetTracesRouteSearch = z.object({
+  filter: TargetTracesFilterState.optional().default({}),
+  sort: TargetTracesSort.shape.optional().default([]),
+  pagination: TargetTracesPagination.shape.optional().default({}),
+});
+const targetTracesRoute = createRoute({
   getParentRoute: () => targetRoute,
-  path: 'insights-new',
-  component: function TargetInsightsNewRoute() {
-    const { organizationSlug, projectSlug, targetSlug } = targetInsightsNewRoute.useParams();
+  path: 'traces',
+  validateSearch: TargetTracesRouteSearch.parse,
+  component: function TargetTracesRoute() {
+    const { organizationSlug, projectSlug, targetSlug } = targetTracesRoute.useParams();
+    const { filter, sort, pagination } = targetTracesRoute.useSearch();
+
     return (
-      <TargetInsightsNewPage
+      <TargetTracesPage
         organizationSlug={organizationSlug}
         projectSlug={projectSlug}
         targetSlug={targetSlug}
+        sorting={sort}
+        pagination={pagination}
+        filter={filter}
       />
     );
   },
 });
 
-const targetInsightsNewTraceRoute = createRoute({
+const targetTraceRoute = createRoute({
   getParentRoute: () => targetRoute,
-  path: 'insights-new/trace',
-  component: function TargetInsightsNewTraceRoute() {
-    const { organizationSlug, projectSlug, targetSlug } = targetInsightsNewTraceRoute.useParams();
+  path: 'trace/$traceId',
+  component: function TargetTraceRoute() {
+    const { organizationSlug, projectSlug, targetSlug, traceId } = targetTraceRoute.useParams();
     return (
-      <TargetInsightsNewTracePage
+      <TargetTracePage
+        traceId={traceId}
         organizationSlug={organizationSlug}
         projectSlug={projectSlug}
         targetSlug={targetSlug}
@@ -908,8 +929,8 @@ const routeTree = root.addChildren([
       targetLaboratoryRoute,
       targetHistoryRoute.addChildren([targetHistoryVersionRoute]),
       targetInsightsRoute,
-      targetInsightsNewRoute,
-      targetInsightsNewTraceRoute,
+      targetTraceRoute,
+      targetTracesRoute,
       targetInsightsCoordinateRoute,
       targetInsightsClientRoute,
       targetInsightsOperationsRoute,
@@ -924,7 +945,25 @@ const routeTree = root.addChildren([
   ]),
 ]);
 
-export const router = createRouter({ routeTree });
+export const router = createRouter({
+  routeTree,
+  parseSearch: parseSearchWith(jsUrlParse),
+  stringifySearch: stringifySearchWith(jsUrlStringify),
+  // parseSearch: parseSearchWith(value =>
+  //   qs.parse(value, {
+  //     parseNumbers: true,
+  //     parseBooleans: true,
+  //     arrayFormat: 'bracket-separator',
+  //     arrayFormatSeparator: '|',
+  //   }),
+  // ),
+  // stringifySearch: stringifySearchWith(value =>
+  //   qs.stringify(value, {
+  //     arrayFormat: 'bracket-separator',
+  //     arrayFormatSeparator: '|',
+  //   }),
+  // ),
+});
 
 router.history.subscribe(() => {
   gtag.pageview(router.history.location.href);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fc29e4346f..8849d7c2f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1851,6 +1851,9 @@ importers:
       '@types/js-cookie':
         specifier: 3.0.6
         version: 3.0.6
+      '@types/lodash.debounce':
+        specifier: 4.0.9
+        version: 4.0.9
       '@types/react':
         specifier: 18.3.18
         version: 18.3.18
@@ -1944,6 +1947,12 @@ importers:
       json-schema-yup-transformer:
         specifier: 1.6.12
         version: 1.6.12
+      jsurl2:
+        specifier: 2.2.0
+        version: 2.2.0
+      lodash.debounce:
+        specifier: 4.0.8
+        version: 4.0.8
       lucide-react:
         specifier: 0.469.0
         version: 0.469.0(react@18.3.1)
@@ -1956,6 +1965,9 @@ importers:
       monaco-themes:
         specifier: 0.4.4
         version: 0.4.4
+      query-string:
+        specifier: 9.1.1
+        version: 9.1.1
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -8491,6 +8503,9 @@ packages:
   '@types/keyv@3.1.4':
     resolution: {integrity: sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==}
 
+  '@types/lodash.debounce@4.0.9':
+    resolution: {integrity: sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==}
+
   '@types/lodash.sortby@4.7.9':
     resolution: {integrity: sha512-PDmjHnOlndLS59GofH0pnxIs+n9i4CWeXGErSB5JyNFHu2cmvW6mQOaUKjG8EDPkni14IgF8NsRW8bKvFzTm9A==}
 
@@ -10237,6 +10252,10 @@ packages:
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
+  decode-uri-component@0.4.1:
+    resolution: {integrity: sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==}
+    engines: {node: '>=14.16'}
+
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -11107,6 +11126,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  filter-obj@5.1.0:
+    resolution: {integrity: sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==}
+    engines: {node: '>=14.16'}
+
   finalhandler@1.3.1:
     resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
     engines: {node: '>= 0.8'}
@@ -12525,6 +12548,9 @@ packages:
     resolution: {integrity: sha512-gqXddjPqQ6G40VdnI6T6yObEC+pDNvyP95wdQhkWkg7crHH3km5qP1FsOXEkzEQwnz6gz5qGTn1c2Y52wP3OyQ==}
     engines: {'0': node >=0.6.0}
 
+  jsurl2@2.2.0:
+    resolution: {integrity: sha512-jFwgc2G7eVMF6/uyxsF+7DbNEg7fj7SRWmJuVfu/SAOK0iIH9gOpLK9FL1jLvENCXS7kYsYcmFxRFQFyQEb7jg==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -12764,6 +12790,9 @@ packages:
   lodash.castarray@4.4.0:
     resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==}
 
+  lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+
   lodash.defaults@4.2.0:
     resolution: {integrity: sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==}
 
@@ -14682,6 +14711,10 @@ packages:
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
+  query-string@9.1.1:
+    resolution: {integrity: sha512-MWkCOVIcJP9QSKU52Ngow6bsAWAPlPK2MludXvcrS2bGZSl+T1qX9MZvRIkqUIkGLJquMJHWfsT6eRqUpp4aWg==}
+    engines: {node: '>=18'}
+
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
@@ -15637,6 +15670,10 @@ packages:
   split-ca@1.0.1:
     resolution: {integrity: sha512-Q5thBSxp5t8WPTTJQS59LrGqOZqOsrhDGDVm8azCqIBjSBd7nd9o2PM+mDulQQkh8h//4U6hFZnc/mul8t5pWQ==}
 
+  split-on-first@3.0.0:
+    resolution: {integrity: sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==}
+    engines: {node: '>=12'}
+
   split2@4.1.0:
     resolution: {integrity: sha512-VBiJxFkxiXRlUIeyMQi8s4hgvKCSjtknJv/LVYbrgALPwf5zSKmEwV9Lst25AkvMDnvxODugjdl6KZgwKM1WYQ==}
     engines: {node: '>= 10.x'}
@@ -17531,8 +17568,8 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17639,11 +17676,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.596.0(@aws-sdk/client-sts@3.596.0)':
+  '@aws-sdk/client-sso-oidc@3.596.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17682,7 +17719,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
-      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.723.0(@aws-sdk/client-sts@3.723.0)':
@@ -17816,11 +17852,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sts@3.596.0':
+  '@aws-sdk/client-sts@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17859,6 +17895,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
+      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/client-sts@3.723.0':
@@ -17972,7 +18009,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-ini@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/credential-provider-env': 3.587.0
       '@aws-sdk/credential-provider-http': 3.596.0
       '@aws-sdk/credential-provider-process': 3.587.0
@@ -18091,7 +18128,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.587.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/types': 3.7.2
@@ -18266,7 +18303,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/shared-ini-file-loader': 3.1.12
@@ -26133,6 +26170,10 @@ snapshots:
     dependencies:
       '@types/node': 22.10.5
 
+  '@types/lodash.debounce@4.0.9':
+    dependencies:
+      '@types/lodash': 4.17.14
+
   '@types/lodash.sortby@4.7.9':
     dependencies:
       '@types/lodash': 4.17.13
@@ -28137,6 +28178,8 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
+  decode-uri-component@0.4.1: {}
+
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
@@ -29283,6 +29326,8 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  filter-obj@5.1.0: {}
+
   finalhandler@1.3.1:
     dependencies:
       debug: 2.6.9
@@ -30893,6 +30938,8 @@ snapshots:
       json-schema: 0.4.0
       verror: 1.10.0
 
+  jsurl2@2.2.0: {}
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.1.7
@@ -31143,6 +31190,8 @@ snapshots:
 
   lodash.castarray@4.4.0: {}
 
+  lodash.debounce@4.0.8: {}
+
   lodash.defaults@4.2.0: {}
 
   lodash.get@4.4.2: {}
@@ -33599,6 +33648,12 @@ snapshots:
 
   quansync@0.2.11: {}
 
+  query-string@9.1.1:
+    dependencies:
+      decode-uri-component: 0.4.1
+      filter-obj: 5.1.0
+      split-on-first: 3.0.0
+
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
@@ -34837,6 +34892,8 @@ snapshots:
 
   split-ca@1.0.1: {}
 
+  split-on-first@3.0.0: {}
+
   split2@4.1.0: {}
 
   sponge-case@1.0.1:

From 33f8675e0b4b62f6f8b945856919c3b46260554a Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Sat, 22 Mar 2025 12:14:32 +0100
Subject: [PATCH 008/123] ye

---
 package.json                                  |    2 +-
 .../operations/module.graphql.mappers.ts      |   17 +
 .../src/modules/operations/module.graphql.ts  |   69 +
 .../modules/operations/resolvers/Target.ts    |  267 ++++
 .../resolvers/TracesFilterOptions.ts          |   91 ++
 .../app/src/pages/target-traces-filter.tsx    |    2 +-
 packages/web/app/src/pages/target-traces.tsx  | 1132 +++++++----------
 pnpm-lock.yaml                                |   10 +-
 8 files changed, 938 insertions(+), 652 deletions(-)
 create mode 100644 packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts

diff --git a/package.json b/package.json
index c583ec7291..4531784174 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "docker:override-up": "docker compose -f ./docker/docker-compose.override.yml up -d --remove-orphans",
     "env:sync": "tsx scripts/sync-env-files.ts",
     "generate": "pnpm --filter @hive/storage db:generate && pnpm graphql:generate",
-    "graphql:generate": "graphql-codegen --config codegen.mts",
+    "graphql:generate": "VERBOSE=1 graphql-codegen --config codegen.mts",
     "graphql:generate:watch": "pnpm graphql:generate --watch",
     "integration:prepare": "cd integration-tests && ./local.sh",
     "lint": "eslint --cache --ignore-path .gitignore \"{packages,cypress}/**/*.{ts,tsx,graphql}\"",
diff --git a/packages/services/api/src/modules/operations/module.graphql.mappers.ts b/packages/services/api/src/modules/operations/module.graphql.mappers.ts
index 19519e56f0..35922b47a1 100644
--- a/packages/services/api/src/modules/operations/module.graphql.mappers.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.mappers.ts
@@ -1,6 +1,9 @@
+import type Dataloader from 'dataloader';
 import type { ClientStatsValues, OperationStatsValues, PageInfo } from '../../__generated__/types';
 import type { DateRange } from '../../shared/entities';
 
+// import { SqlValue } from './providers/sql';
+
 type Connection<TNode> = {
   pageInfo: PageInfo;
   edges: Array<{ node: TNode; cursor: string }>;
@@ -41,3 +44,17 @@ export interface DurationValuesMapper {
   p95: number | null;
   p99: number | null;
 }
+
+export type TracesFilterOptionsMapper = {
+  // ANDs: readonly SqlValue[];
+  loader: Dataloader<
+    {
+      key: string;
+      columnExpression: string;
+      limit: number | null;
+      arrayJoinColumn: string | null;
+    },
+    { value: string; count: number }[],
+    string
+  >;
+};
diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 00d2e4c7e4..83478d52fd 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -259,6 +259,73 @@ export default gql`
     body: String! @tag(name: "public")
   }
 
+  type TraceConnection {
+    edges: [TraceEdge!]!
+    pageInfo: PageInfo!
+  }
+
+  type TraceEdge {
+    node: Trace!
+    cursor: String!
+  }
+
+  type Trace {
+    id: ID!
+    timestamp: DateTime!
+    operationName: String!
+    operationType: GraphQLOperationType!
+    duration: Int!
+    subgraphs: [String!]!
+    success: Boolean!
+    clientName: String
+    clientVersion: String
+    httpStatusCode: Int
+    httpMethod: String
+    httpHost: String
+    httpRoute: String
+    httpUrl: String
+  }
+
+  input TracesFilterInput {
+    id: [ID!]
+    operationName: [String!]
+    operationType: [GraphQLOperationType!]
+    success: [Boolean!]
+    httpStatusCode: [Int!]
+    httpMethod: [String!]
+    httpHost: [String!]
+    httpRoute: [String!]
+    httpUrl: [String!]
+    subgraphs: [String!]
+  }
+
+  type TracesFilterOptions {
+    success: [FilterBooleanOption!]!
+    operationType: [FilterStringOption!]!
+    operationName(top: Int): [FilterStringOption!]!
+    httpStatusCode(top: Int): [FilterIntOption!]!
+    httpMethod(top: Int): [FilterStringOption!]!
+    httpHost(top: Int): [FilterStringOption!]!
+    httpRoute(top: Int): [FilterStringOption!]!
+    httpUrl(top: Int): [FilterStringOption!]!
+    subgraphs(top: Int): [FilterStringOption!]!
+  }
+
+  type FilterStringOption {
+    value: String!
+    count: Int!
+  }
+
+  type FilterBooleanOption {
+    value: Boolean!
+    count: Int!
+  }
+
+  type FilterIntOption {
+    value: Int!
+    count: Int!
+  }
+
   extend type Target {
     requestsOverTime(resolution: Int!, period: DateRangeInput!): [RequestsOverTime!]!
     totalRequests(period: DateRangeInput!): SafeInt!
@@ -266,6 +333,8 @@ export default gql`
     Retrieve an operation via it's hash.
     """
     operation(hash: ID! @tag(name: "public")): Operation @tag(name: "public")
+    traces(first: Int, after: String, filter: TracesFilterInput): TraceConnection!
+    tracesFilterOptions(filter: TracesFilterInput): TracesFilterOptions!
   }
 
   extend type Project {
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 21affaa344..a231d2612a 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -1,5 +1,8 @@
+import Dataloader from 'dataloader';
 import { parseDateRangeInput } from '../../../shared/helpers';
+import { ClickHouse, sql } from '../providers/clickhouse-client';
 import { OperationsManager } from '../providers/operations-manager';
+import { SqlValue } from '../providers/sql';
 import type { TargetResolvers } from './../../../__generated__/types';
 
 export const Target: Pick<
@@ -10,6 +13,8 @@ export const Target: Pick<
   | 'requestsOverTime'
   | 'schemaCoordinateStats'
   | 'totalRequests'
+  | 'traces'
+  | 'tracesFilterOptions'
 > = {
   totalRequests: (target, { period }, { injector }) => {
     return injector.get(OperationsManager).countRequests({
@@ -69,4 +74,266 @@ export const Target: Pick<
       schemaCoordinate: args.schemaCoordinate,
     };
   },
+  traces: async (_parent, { first, filter }, { injector }) => {
+    const clickhouse = injector.get(ClickHouse);
+    const limit = (first ?? 10) + 1;
+
+    const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
+
+    if (filter?.id?.length) {
+      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
+    }
+
+    if (filter?.success?.length) {
+      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
+      ANDs.push(
+        sql`${sql.join(
+          filter.success.map(ok =>
+            ok
+              ? // 2XX
+                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
+              : // non-2XXX
+                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
+          ),
+          ' OR ',
+        )}`,
+      );
+    }
+
+    if (filter?.operationName?.length) {
+      ANDs.push(sql`operation_name IN (${sql.array(filter.operationName, 'String')})`);
+    }
+
+    if (filter?.operationType?.length) {
+      ANDs.push(sql`operation_type IN (${sql.array(filter.operationType, 'String')})`);
+    }
+
+    if (filter?.subgraphs?.length) {
+      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
+    }
+
+    if (filter?.httpStatusCode?.length) {
+      ANDs.push(
+        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+      );
+    }
+
+    if (filter?.httpMethod?.length) {
+      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    }
+
+    if (filter?.httpHost?.length) {
+      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    }
+
+    if (filter?.httpRoute?.length) {
+      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
+    }
+
+    if (filter?.httpUrl?.length) {
+      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
+    }
+
+    const tracesQuery = await clickhouse.query<{
+      target_id: string;
+      trace_id: string;
+      span_id: string;
+      timestamp: string;
+      operation_name: string;
+      operation_type: string;
+      duration: number;
+      subgraph_names: string[];
+      http_status_code: string;
+      http_method: string;
+      http_host: string;
+      http_route: string;
+      http_url: string;
+    }>({
+      query: sql`
+        SELECT
+          target_id,
+          trace_id,
+          span_id,
+          timestamp,
+          operation_name,
+          operation_type,
+          duration,
+          subgraph_names,
+          http_status_code,
+          http_method,
+          http_host,
+          http_route,
+          http_url
+        FROM otel_traces_normalized
+        WHERE ${sql.join(ANDs, ' AND ')}
+        ORDER BY timestamp DESC, trace_id DESC
+        LIMIT ${sql.raw(String(limit))}
+      `,
+      queryId: 'traces',
+      timeout: 10_000,
+    });
+
+    const traces = tracesQuery.data;
+    let hasNext = false;
+
+    if (traces.length == limit) {
+      hasNext = true;
+      (traces as any).pop();
+    }
+
+    return {
+      edges: traces.map(trace => {
+        return {
+          node: {
+            id: trace.trace_id,
+            timestamp: new Date(trace.timestamp),
+            operationName: trace.operation_name,
+            operationType: trace.operation_type as any,
+            duration: trace.duration,
+            subgraphs: trace.subgraph_names,
+            success: trace.http_status_code === '200',
+            clientName: null,
+            clientVersion: null,
+            httpStatusCode: Number(trace.http_status_code),
+            httpMethod: trace.http_method,
+            httpHost: trace.http_host,
+            httpRoute: trace.http_route,
+            httpUrl: trace.http_url,
+          },
+          cursor: Buffer.from(`${trace.timestamp}|${trace.trace_id}`).toString('base64'),
+        };
+      }),
+      pageInfo: {
+        hasNextPage: hasNext,
+        hasPreviousPage: false,
+        endCursor: traces.length
+          ? Buffer.from(
+              `${traces[traces.length - 1].timestamp}|${traces[traces.length - 1].trace_id}`,
+            ).toString('base64')
+          : '',
+        startCursor: traces.length
+          ? Buffer.from(`${traces[0].timestamp}|${traces[0].trace_id}`).toString('base64')
+          : '',
+      },
+    };
+  },
+  tracesFilterOptions: async (_parent, { filter }, { injector }) => {
+    const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
+
+    if (filter?.id?.length) {
+      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
+    }
+
+    if (filter?.success?.length) {
+      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
+      ANDs.push(
+        sql`${sql.join(
+          filter.success.map(ok =>
+            ok
+              ? // 2XX
+                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
+              : // non-2XXX
+                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
+          ),
+          ' OR ',
+        )}`,
+      );
+    }
+
+    if (filter?.operationName?.length) {
+      ANDs.push(sql`operation_name IN (${sql.array(filter.operationName, 'String')})`);
+    }
+
+    if (filter?.operationType?.length) {
+      ANDs.push(sql`operation_type IN (${sql.array(filter.operationType, 'String')})`);
+    }
+
+    if (filter?.subgraphs?.length) {
+      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
+    }
+
+    if (filter?.httpStatusCode?.length) {
+      ANDs.push(
+        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+      );
+    }
+
+    if (filter?.httpMethod?.length) {
+      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    }
+
+    if (filter?.httpHost?.length) {
+      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    }
+
+    if (filter?.httpRoute?.length) {
+      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
+    }
+
+    if (filter?.httpUrl?.length) {
+      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
+    }
+
+    const loader = new Dataloader<
+      {
+        key: string;
+        columnExpression: string;
+        limit: number | null;
+        arrayJoinColumn: string | null;
+      },
+      { value: string; count: number }[],
+      string
+    >(
+      async inputs => {
+        const statements: SqlValue[] = [];
+
+        for (const { key, columnExpression, limit, arrayJoinColumn } of inputs) {
+          statements.push(sql`
+            SELECT
+              ${key} as key,
+              toString(${sql.raw(columnExpression)}) AS value,
+              count(*) AS count
+            FROM otel_traces_normalized
+            ${sql.raw(arrayJoinColumn ? `ARRAY JOIN ${arrayJoinColumn} as value` : '')}
+            WHERE ${sql.join(ANDs, ' AND ')}
+            GROUP BY value
+            ORDER BY count DESC
+            ${sql.raw(limit ? `LIMIT ${limit}` : '')}
+          `);
+        }
+
+        const results = await injector.get(ClickHouse).query<{
+          key: string;
+          value: string;
+          count: number;
+        }>({
+          query: sql`
+            ${sql.join(statements, ' UNION ALL ')}
+          `,
+          queryId: 'traces_filter_options',
+          timeout: 10_000,
+        });
+
+        const rowsGroupedByKey = results.data.reduce(
+          (acc, row) => {
+            if (!acc[row.key]) {
+              acc[row.key] = [];
+            }
+            acc[row.key].push({ value: row.value, count: row.count });
+            return acc;
+          },
+          {} as Record<string, { value: string; count: number }[]>,
+        );
+
+        return inputs.map(input => rowsGroupedByKey[input.key] ?? []);
+      },
+      {
+        cacheKeyFn: JSON.stringify,
+      },
+    );
+
+    return {
+      loader,
+    };
+  },
 };
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
new file mode 100644
index 0000000000..936d923403
--- /dev/null
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -0,0 +1,91 @@
+import type { TracesFilterOptionsResolvers } from './../../../__generated__/types';
+
+/*
+ * Note: This object type is generated because "TracesFilterOptionsMapper" is declared. This is to ensure runtime safety.
+ *
+ * When a mapper is used, it is possible to hit runtime errors in some scenarios:
+ * - given a field name, the schema type's field type does not match mapper's field type
+ * - or a schema type's field does not exist in the mapper's fields
+ *
+ * If you want to skip this file generation, remove the mapper or update the pattern in the `resolverGeneration.object` config.
+ */
+export const TracesFilterOptions: TracesFilterOptionsResolvers = {
+  /* Implement TracesFilterOptions resolver logic here */
+  httpHost: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'http_url',
+      columnExpression: 'http_host',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
+  },
+  httpMethod: async ({ loader }, { top }, { injector }) => {
+    return loader.load({
+      key: 'http_method',
+      columnExpression: 'http_method',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
+  },
+  httpRoute: async ({ loader }, { top }, { injector }) => {
+    return loader.load({
+      key: 'http_route',
+      columnExpression: 'http_route',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
+  },
+  httpStatusCode: async ({ loader }, { top }) => {
+    return loader
+      .load({
+        key: 'http_status_code',
+        columnExpression: 'http_status_code',
+        limit: top ?? 5,
+        arrayJoinColumn: null,
+      })
+      .then(data => data.map(({ value, count }) => ({ value: Number(value), count })));
+  },
+  httpUrl: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'http_url',
+      columnExpression: 'http_url',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
+  },
+  operationName: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'operation_name',
+      columnExpression: 'operation_name',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
+  },
+  operationType: async ({ loader }) => {
+    return loader.load({
+      key: 'operation_type',
+      columnExpression: 'operation_type',
+      limit: null,
+      arrayJoinColumn: null,
+    });
+  },
+  subgraphs: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'subgraph_names',
+      columnExpression: 'value',
+      limit: top ?? 5,
+      arrayJoinColumn: 'subgraph_names',
+    });
+  },
+  success: async ({ loader }) => {
+    return loader
+      .load({
+        key: 'success',
+        columnExpression:
+          'if((toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300), true, false)',
+        limit: null,
+        arrayJoinColumn: null,
+      })
+      .then(data => data.map(({ value, count }) => ({ value: value ? true : false, count })));
+  },
+};
diff --git a/packages/web/app/src/pages/target-traces-filter.tsx b/packages/web/app/src/pages/target-traces-filter.tsx
index 3bc4968070..0299ca3d3c 100644
--- a/packages/web/app/src/pages/target-traces-filter.tsx
+++ b/packages/web/app/src/pages/target-traces-filter.tsx
@@ -248,7 +248,7 @@ export const MultiSelectFilter = memo(function <$Value>(props: {
     return props.options.filter(option =>
       option.searchContent.toLowerCase().includes(lowerSearchPhrase),
     );
-  }, [searchPhrase]);
+  }, [searchPhrase, props.options]);
 
   return (
     <Filter name={props.name}>
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 607c3b4c7f..25eeedc965 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,8 +1,9 @@
-import { Fragment, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import { AlertTriangle, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
+import { useQuery } from 'urql';
 import { z } from 'zod';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
@@ -15,6 +16,7 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart';
 import { Meta } from '@/components/ui/meta';
+import { QueryError } from '@/components/ui/query-error';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -40,6 +42,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { DocumentType, FragmentType, graphql, useFragment } from '@/gql';
 import { formatDuration } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
 import { Link, useRouter } from '@tanstack/react-router';
@@ -237,7 +240,8 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-function Traffic() {
+const Traffic = memo(function Traffic() {
+  const data = chartData;
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
   const [_, setZoomedData] = useState<typeof data | null>(null);
@@ -284,21 +288,10 @@ function Traffic() {
       [left, right] = [right, left];
     }
 
-    // Filter data to the selected range
-    const filteredData = data.filter(
-      entry =>
-        entry.timestamp >= parseDate(left, 'yyyy-MM-dd', now).getTime() &&
-        entry.timestamp <= parseDate(right, 'yyyy-MM-dd', now).getTime(),
-    );
-
-    if (filteredData.length > 0) {
-      setZoomedData(filteredData);
-    }
-
     setRefAreaLeft(null);
     setRefAreaRight(null);
     setIsSelecting(false);
-  }, [refAreaLeft, refAreaRight, data]);
+  }, [refAreaLeft, refAreaRight]);
 
   return (
     <ChartContainer
@@ -350,7 +343,7 @@ function Traffic() {
       </BarChart>
     </ChartContainer>
   );
-}
+});
 
 type Trace = {
   id: string;
@@ -368,626 +361,6 @@ type Trace = {
   subgraphNames: string[];
 };
 
-const now = new Date();
-function generateTraceId() {
-  return [...Array(32)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
-}
-const data: Trace[] = [
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime(),
-    status: 'ok',
-    duration: 6019,
-    kind: 'query',
-    operationName: 'FetchProducts',
-    operationHash: '3h1s',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['link', 'products', 'prices'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 120000,
-    status: 'ok',
-    duration: 6019,
-    kind: 'query',
-    operationName: 'FetchProducts',
-    operationHash: '3h1s',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['link', 'products', 'prices'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 240000,
-    status: 'error',
-    duration: 10045,
-    kind: 'mutation',
-    operationName: 'UpdateProduct',
-    operationHash: '8f2b',
-    httpStatus: 500,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['products'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 360000,
-    status: 'ok',
-    duration: 3045,
-    kind: 'query',
-    operationName: 'GetUser',
-    operationHash: 'a7g4',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 480000,
-    status: 'ok',
-    duration: 4521,
-    kind: 'query',
-    operationName: 'ListOrders',
-    operationHash: 'c9h2',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders', 'users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 600000,
-    status: 'error',
-    duration: 7890,
-    kind: 'mutation',
-    operationName: 'CancelOrder',
-    operationHash: 'd1k8',
-    httpStatus: 400,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 720000,
-    status: 'ok',
-    duration: 2156,
-    kind: 'subscription',
-    operationName: 'OrderStatusUpdated',
-    operationHash: 'e4m7',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 840000,
-    status: 'ok',
-    duration: 5092,
-    kind: 'query',
-    operationName: 'FetchCart',
-    operationHash: 'f2p9',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['cart', 'products'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 960000,
-    status: 'ok',
-    duration: 6820,
-    kind: 'mutation',
-    operationName: 'AddToCart',
-    operationHash: 'g7r5',
-    httpStatus: 201,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['cart'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-];
-
-export const columns: ColumnDef<Trace>[] = [
-  {
-    accessorKey: 'id',
-    header: () => <div className="pl-2 text-left">Trace ID</div>,
-    cell: ({ row }) => {
-      const targetRef = useTargetReference();
-      const traceId = row.getValue('id') as string;
-
-      return (
-        <div className="px-2 text-left font-mono text-xs font-medium">
-          <Link
-            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
-            params={{
-              organizationSlug: targetRef.organizationSlug,
-              projectSlug: targetRef.projectSlug,
-              targetSlug: targetRef.targetSlug,
-              traceId,
-            }}
-            className="group block w-[6ch] overflow-hidden whitespace-nowrap text-white"
-          >
-            <span>
-              <span className="underline decoration-gray-800 decoration-2 underline-offset-2 group-hover:decoration-white">
-                {traceId.substring(0, 8)}
-              </span>
-              <span
-                style={{
-                  color: 'transparent',
-                  pointerEvents: 'none',
-                  textDecoration: 'none',
-                }}
-              >
-                {traceId.substring(8)}
-              </span>
-            </span>
-          </Link>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'timestamp',
-    header: ({ column }) => {
-      return (
-        <Button
-          variant="link"
-          className="text-muted-foreground"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          Timestamp
-          <ArrowUpDown className="ml-2 size-4" />
-        </Button>
-      );
-    },
-    cell: ({ row }) => {
-      const timestamp = row.getValue('timestamp') as number;
-
-      return (
-        <TooltipProvider>
-          <Tooltip delayDuration={300}>
-            <TooltipTrigger asChild>
-              <div className="px-4 font-mono text-xs uppercase">
-                {formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss')}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent
-              side="bottom"
-              className="cursor-auto overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
-              onClick={e => {
-                // Prevent the click event from bubbling up to the row,
-                // which would trigger the sheet with trace details to open
-                e.stopPropagation();
-              }}
-            >
-              <GridTable
-                rows={[
-                  {
-                    key: 'Local',
-                    value: formatDate(timestamp, 'MMM dd HH:mm:ss'),
-                  },
-                  {
-                    key: 'UTC',
-                    value: formatInTimeZone(timestamp, 'UTC', 'MMM dd HH:mm:ss'),
-                  },
-                  {
-                    key: 'Unix',
-                    value: timestamp,
-                  },
-                  {
-                    key: 'ISO',
-                    value: formatISO(toZonedTime(timestamp, 'UTC')),
-                  },
-                ]}
-              />
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      );
-    },
-  },
-  {
-    accessorKey: 'operationName',
-    header: ({ column }) => {
-      return (
-        <div>
-          <Button
-            variant="link"
-            className="text-muted-foreground"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          >
-            Operation Name
-            <ArrowUpDown className="ml-2 size-4" />
-          </Button>
-        </div>
-      );
-    },
-    cell: ({ row }) => (
-      <TooltipProvider>
-        <Tooltip disableHoverableContent delayDuration={100}>
-          <TooltipTrigger asChild>
-            <div className="flex items-center gap-2 px-4 text-xs">
-              <span className="text-muted-foreground font-mono">
-                {row.original.operationHash.substring(0, 4)}
-              </span>
-              <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
-                {row.original.kind.substring(0, 1).toUpperCase()}
-              </span>
-              <span>{row.getValue('operationName')}</span>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent
-            side="bottom"
-            className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
-          >
-            <GridTable
-              rows={[
-                {
-                  key: 'Name',
-                  value: row.getValue('operationName'),
-                },
-                {
-                  key: 'Kind',
-                  value: row.original.kind,
-                },
-                {
-                  key: 'Hash',
-                  value: row.original.operationHash,
-                },
-              ]}
-            />
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    ),
-  },
-  {
-    accessorKey: 'duration',
-    header: ({ column }) => {
-      return (
-        <div>
-          <Button
-            variant="link"
-            className="text-muted-foreground"
-            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-          >
-            Duration
-            <ArrowUpDown className="ml-2 size-4" />
-          </Button>
-        </div>
-      );
-    },
-    cell: ({ row }) => {
-      const duration = formatDuration(row.getValue('duration'), true);
-      return <div className="px-4 font-mono text-xs font-medium">{duration}</div>;
-    },
-  },
-  {
-    accessorKey: 'status',
-    header: () => <div className="text-center">Status</div>,
-    cell: ({ row }) => {
-      const status = row.getValue('status');
-
-      return (
-        <div className="text-center">
-          <Badge
-            variant="outline"
-            className={cn(
-              'rounded-sm border-0 px-1 text-xs font-medium uppercase',
-              status === 'ok' ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
-            )}
-          >
-            {status}
-          </Badge>
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'subgraphNames',
-    sortingFn(a, b, isAsc) {
-      // sort a.original.subgraphNames.length and b.original.subgraphNames.length
-      const aValue = a.original.subgraphNames.length;
-      const bValue = b.original.subgraphNames.length;
-
-      if (isAsc) {
-        return aValue - bValue;
-      }
-
-      return bValue - aValue;
-    },
-    header: ({ column }) => (
-      <div className="text-center">
-        <Button
-          variant="link"
-          className="text-muted-foreground"
-          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-        >
-          Subgraphs
-          <ArrowUpDown className="ml-2 size-4" />
-        </Button>
-      </div>
-    ),
-    cell: ({ row }) => {
-      return (
-        <div className="text-center font-mono text-xs font-medium">
-          {row.getValue('subgraphNames').length}
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'httpMethod',
-    header: () => <div className="text-center">HTTP Method</div>,
-    cell: ({ row }) => {
-      return (
-        <div className="text-center font-mono text-xs font-medium">
-          {row.getValue('httpMethod')}
-        </div>
-      );
-    },
-  },
-  {
-    accessorKey: 'httpStatus',
-    header: () => <div className="text-center">HTTP Status</div>,
-    cell: ({ row }) => {
-      return (
-        <div className="text-center font-mono text-xs font-medium">
-          {row.getValue('httpStatus')}
-        </div>
-      );
-    },
-  },
-];
-
 const TargetTracesSortShape = z
   .array(
     z.object({
@@ -1022,18 +395,41 @@ type PaginationProps = {
   pagination: PaginationState;
 };
 
-function TracesList(props: SortProps & PaginationProps) {
-  // const [sorting, setSorting] = useState<SortingState>([]);
-  // const [pagination, setPagination] = useState({
-  //   pageIndex: 0,
-  //   pageSize: 20,
-  // });
+const TracesList_Trace = graphql(`
+  fragment TracesList_Trace on Trace {
+    id
+    timestamp
+    operationName
+    operationType
+    duration
+    subgraphs
+    success
+    clientName
+    clientVersion
+    httpStatusCode
+    httpMethod
+    httpHost
+    httpRoute
+    httpUrl
+  }
+`);
+
+const TracesList = memo(function TracesList(
+  props: SortProps &
+    PaginationProps & {
+      traces: FragmentType<typeof TracesList_Trace>[];
+    },
+) {
   const [traceInSheet, setTraceInSheet] = useState<Trace | null>(null);
   const router = useRouter();
+  const data = useFragment(TracesList_Trace, props.traces);
 
   const onSortingChange = useCallback<OnChangeFn<SortState>>(
     updater => {
       const value = typeof updater === 'function' ? updater(props.sorting) : updater;
+      if (JSON.stringify(value) === JSON.stringify(props.sorting)) {
+        return;
+      }
 
       void router.navigate({
         search(params) {
@@ -1051,6 +447,10 @@ function TracesList(props: SortProps & PaginationProps) {
     updater => {
       const value = typeof updater === 'function' ? updater(props.pagination) : updater;
 
+      if (JSON.stringify(value) === JSON.stringify(props.pagination)) {
+        return;
+      }
+
       void router.navigate({
         search(params) {
           return {
@@ -1065,7 +465,257 @@ function TracesList(props: SortProps & PaginationProps) {
 
   const table = useReactTable({
     data,
-    columns,
+    columns: [
+      {
+        accessorKey: 'id',
+        header: () => <div className="pl-2 text-left">Trace ID</div>,
+        cell: ({ row }) => {
+          const targetRef = useTargetReference();
+          const traceId = row.getValue('id') as string;
+
+          return (
+            <div className="px-2 text-left font-mono text-xs font-medium">
+              <Link
+                to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                params={{
+                  organizationSlug: targetRef.organizationSlug,
+                  projectSlug: targetRef.projectSlug,
+                  targetSlug: targetRef.targetSlug,
+                  traceId,
+                }}
+                className="group block w-[6ch] overflow-hidden whitespace-nowrap text-white"
+              >
+                <span>
+                  <span className="underline decoration-gray-800 decoration-2 underline-offset-2 group-hover:decoration-white">
+                    {traceId.substring(0, 8)}
+                  </span>
+                  <span
+                    style={{
+                      color: 'transparent',
+                      pointerEvents: 'none',
+                      textDecoration: 'none',
+                    }}
+                  >
+                    {traceId.substring(8)}
+                  </span>
+                </span>
+              </Link>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'timestamp',
+        header: ({ column }) => {
+          return (
+            <Button
+              variant="link"
+              className="text-muted-foreground"
+              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            >
+              Timestamp
+              <ArrowUpDown className="ml-2 size-4" />
+            </Button>
+          );
+        },
+        cell: ({ row }) => {
+          const timestamp = row.getValue('timestamp') as number;
+
+          return (
+            <TooltipProvider>
+              <Tooltip delayDuration={300}>
+                <TooltipTrigger asChild>
+                  <div className="px-4 font-mono text-xs uppercase">
+                    {formatDate(row.getValue('timestamp'), 'MMM dd HH:mm:ss')}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  className="cursor-auto overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+                  onClick={e => {
+                    // Prevent the click event from bubbling up to the row,
+                    // which would trigger the sheet with trace details to open
+                    e.stopPropagation();
+                  }}
+                >
+                  <GridTable
+                    rows={[
+                      {
+                        key: 'Local',
+                        value: formatDate(timestamp, 'MMM dd HH:mm:ss'),
+                      },
+                      {
+                        key: 'UTC',
+                        value: formatInTimeZone(timestamp, 'UTC', 'MMM dd HH:mm:ss'),
+                      },
+                      {
+                        key: 'Unix',
+                        value: timestamp,
+                      },
+                      {
+                        key: 'ISO',
+                        value: formatISO(toZonedTime(timestamp, 'UTC')),
+                      },
+                    ]}
+                  />
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          );
+        },
+      },
+      {
+        accessorKey: 'operationName',
+        header: ({ column }) => {
+          return (
+            <div>
+              <Button
+                variant="link"
+                className="text-muted-foreground"
+                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              >
+                Operation Name
+                <ArrowUpDown className="ml-2 size-4" />
+              </Button>
+            </div>
+          );
+        },
+        cell: ({ row }) => (
+          <TooltipProvider>
+            <Tooltip disableHoverableContent delayDuration={100}>
+              <TooltipTrigger asChild>
+                <div className="flex items-center gap-2 px-4 text-xs">
+                  <span className="text-muted-foreground font-mono">
+                    {Math.random().toString(16).substring(2, 6)}
+                  </span>
+                  <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
+                    {row.original.operationType.substring(0, 1).toUpperCase()}
+                  </span>
+                  <span>{row.getValue('operationName')}</span>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent
+                side="bottom"
+                className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+              >
+                <GridTable
+                  rows={[
+                    {
+                      key: 'Name',
+                      value: row.getValue('operationName'),
+                    },
+                    {
+                      key: 'Kind',
+                      value: row.original.operationType,
+                    },
+                    {
+                      key: 'Hash',
+                      value: Math.random().toString(16).substring(2),
+                    },
+                  ]}
+                />
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        ),
+      },
+      {
+        accessorKey: 'duration',
+        header: ({ column }) => {
+          return (
+            <div>
+              <Button
+                variant="link"
+                className="text-muted-foreground"
+                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+              >
+                Duration
+                <ArrowUpDown className="ml-2 size-4" />
+              </Button>
+            </div>
+          );
+        },
+        cell: ({ row }) => {
+          const duration = formatDuration(row.getValue('duration') / 1000000, true);
+          return <div className="px-4 font-mono text-xs font-medium">{duration}</div>;
+        },
+      },
+      {
+        accessorKey: 'success',
+        header: () => <div className="text-center">Status</div>,
+        cell: ({ row }) => {
+          const status = row.getValue('success');
+
+          return (
+            <div className="text-center">
+              <Badge
+                variant="outline"
+                className={cn(
+                  'rounded-sm border-0 px-1 text-xs font-medium uppercase',
+                  status ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+                )}
+              >
+                {status ? 'Ok' : 'Error'}
+              </Badge>
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'subgraphs',
+        sortingFn(a, b, isAsc) {
+          const aValue = a.original.subgraphs.length;
+          const bValue = b.original.subgraphs.length;
+
+          if (isAsc) {
+            return aValue - bValue;
+          }
+
+          return bValue - aValue;
+        },
+        header: ({ column }) => (
+          <div className="text-center">
+            <Button
+              variant="link"
+              className="text-muted-foreground"
+              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            >
+              Subgraphs
+              <ArrowUpDown className="ml-2 size-4" />
+            </Button>
+          </div>
+        ),
+        cell: ({ row }) => {
+          return (
+            <div className="text-center font-mono text-xs font-medium">
+              {row.getValue('subgraphs').length}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'httpMethod',
+        header: () => <div className="text-center">HTTP Method</div>,
+        cell: ({ row }) => {
+          return (
+            <div className="text-center font-mono text-xs font-medium">
+              {row.getValue('httpMethod')}
+            </div>
+          );
+        },
+      },
+      {
+        accessorKey: 'httpStatusCode',
+        header: () => <div className="text-center">HTTP Status</div>,
+        cell: ({ row }) => {
+          return (
+            <div className="text-center font-mono text-xs font-medium">
+              {row.getValue('httpStatusCode')}
+            </div>
+          );
+        },
+      },
+    ],
     onSortingChange,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
@@ -1128,7 +778,7 @@ function TracesList(props: SortProps & PaginationProps) {
               ))
             ) : (
               <TableRow>
-                <TableCell colSpan={columns.length} className="h-24 text-center">
+                <TableCell colSpan={table.options.columns.length} className="h-24 text-center">
                   No results.
                 </TableCell>
               </TableRow>
@@ -1159,7 +809,7 @@ function TracesList(props: SortProps & PaginationProps) {
       <TraceSheet trace={traceInSheet} />
     </Sheet>
   );
-}
+});
 
 function LabelWithColor(props: { className: string; children: ReactNode }) {
   return (
@@ -1421,8 +1071,13 @@ const filterOptions = {
   ],
 };
 
-function Filters(props: FilterProps) {
+function Filters(
+  props: FilterProps & {
+    options: typeof filterOptions;
+  },
+) {
   const filters = props.filter;
+  const filterOptions = props.options;
 
   // Stores the update handlers in a ref to prevent unnecessary re-renders
   const router = useRouter();
@@ -1665,6 +1320,8 @@ function TraceSheet(props: { trace: Trace | null }) {
   const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
   const trace = props.trace;
 
+  return null;
+
   if (!trace) {
     return null;
   }
@@ -1927,8 +1584,181 @@ function SearchBar(props: { onFiltersOpenChange: () => void }) {
   // );
 }
 
-function TargetInsightsNewPageContent(props: SortProps & PaginationProps & FilterProps) {
+const TargetTracesPageQuery = graphql(`
+  query TargetTracesPageQuery(
+    $targetRef: TargetSelectorInput!
+    $first: Int!
+    $filter: TracesFilterInput
+    $filterTopN: Int!
+  ) {
+    target(reference: { bySelector: $targetRef }) {
+      id
+      traces(first: $first, filter: $filter) {
+        edges {
+          node {
+            ...TracesList_Trace
+          }
+          cursor
+        }
+        pageInfo {
+          hasNextPage
+        }
+      }
+      tracesFilterOptions(filter: $filter) {
+        success {
+          value
+          count
+        }
+        operationType {
+          value
+          count
+        }
+        operationName(top: $filterTopN) {
+          value
+          count
+        }
+        httpStatusCode(top: $filterTopN) {
+          value
+          count
+        }
+        httpMethod(top: $filterTopN) {
+          value
+          count
+        }
+        httpHost(top: $filterTopN) {
+          value
+          count
+        }
+        httpRoute(top: $filterTopN) {
+          value
+          count
+        }
+        httpUrl(top: $filterTopN) {
+          value
+          count
+        }
+        subgraphs(top: $filterTopN) {
+          value
+          count
+        }
+      }
+    }
+  }
+`);
+
+function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
   const [filtersOpen, setFiltersOpen] = useState(true);
+  const targetRef = useTargetReference();
+  const [query] = useQuery({
+    query: TargetTracesPageQuery,
+    variables: {
+      targetRef: {
+        organizationSlug: targetRef.organizationSlug,
+        projectSlug: targetRef.projectSlug,
+        targetSlug: targetRef.targetSlug,
+      },
+      filterTopN: 5,
+      filter: {
+        id: props.filter['trace.id'],
+        operationName: props.filter['graphql.operation'],
+        operationType: props.filter['graphql.kind'] as any,
+        success: props.filter['graphql.status'].map(s => s === 'ok'),
+        httpStatusCode: props.filter['http.status'].map(Number),
+        httpMethod: props.filter['http.method'],
+        httpHost: props.filter['http.host'],
+        httpRoute: props.filter['http.route'],
+        httpUrl: props.filter['http.url'],
+        subgraphs: props.filter['graphql.subgraph'],
+      },
+      first: props.pagination.pageSize,
+    },
+  });
+
+  const traces = useMemo(
+    () => query.data?.target?.traces.edges.map(e => e.node),
+    [query.data?.target?.traces.edges],
+  );
+
+  const filterOptions = useMemo(() => {
+    const options = query.data?.target?.tracesFilterOptions;
+
+    return {
+      'graphql.status':
+        options?.success.map(option => ({
+          value: option.value ? 'ok' : 'error',
+          searchContent: option.value ? 'ok' : 'error',
+          label: option.value ? 'Ok' : 'Error',
+          count: option.count,
+        })) ?? [],
+      'graphql.kind':
+        options?.operationType.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'graphql.name':
+        options?.operationName.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'http.status':
+        options?.httpStatusCode.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'http.method':
+        options?.httpMethod.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'http.host':
+        options?.httpHost.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'http.route':
+        options?.httpRoute.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'http.url':
+        options?.httpUrl.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'graphql.subgraph':
+        options?.subgraphs.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
+      'graphql.client': [],
+    };
+  }, [query.data?.target?.tracesFilterOptions]);
+
+  if (query.error) {
+    return (
+      <QueryError
+        organizationSlug={targetRef.organizationSlug}
+        error={query.error}
+        showLogoutButton={false}
+      />
+    );
+  }
 
   return (
     <div className="py-6">
@@ -1936,7 +1766,7 @@ function TargetInsightsNewPageContent(props: SortProps & PaginationProps & Filte
         {filtersOpen ? (
           <Sidebar collapsible="none" className="bg-transparent">
             <SidebarContent>
-              <Filters filter={props.filter} />
+              <Filters filter={props.filter} options={filterOptions} />
             </SidebarContent>
           </Sidebar>
         ) : null}
@@ -1946,7 +1776,11 @@ function TargetInsightsNewPageContent(props: SortProps & PaginationProps & Filte
               <SearchBar onFiltersOpenChange={() => setFiltersOpen(isOpen => !isOpen)} />
               <Traffic />
             </div>
-            <TracesList sorting={props.sorting} pagination={props.pagination} />
+            <TracesList
+              sorting={props.sorting}
+              pagination={props.pagination}
+              traces={traces ?? []}
+            />
           </div>
         </SidebarInset>
       </SidebarProvider>
@@ -1972,7 +1806,7 @@ export function TargetTracesPage(
         targetSlug={props.targetSlug}
         page={Page.Traces}
       >
-        <TargetInsightsNewPageContent
+        <TargetTracesPageContent
           sorting={props.sorting}
           pagination={props.pagination}
           filter={props.filter}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8849d7c2f4..e9fa48fc9c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1415,7 +1415,7 @@ importers:
     devDependencies:
       '@graphql-inspector/core':
         specifier: 5.1.0-alpha-20231208113249-34700c8a
-        version: 5.1.0-alpha-20231208113249-34700c8a(graphql@16.9.0)
+        version: 5.1.0-alpha-20231208113249-34700c8a(graphql@16.11.0)
       '@hive/service-common':
         specifier: workspace:*
         version: link:../service-common
@@ -3644,6 +3644,7 @@ packages:
 
   '@fastify/vite@6.0.7':
     resolution: {integrity: sha512-+dRo9KUkvmbqdmBskG02SwigWl06Mwkw8SBDK1zTNH6vd4DyXbRvI7RmJEmBkLouSU81KTzy1+OzwHSffqSD6w==}
+    bundledDependencies: []
 
   '@floating-ui/core@1.2.6':
     resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
@@ -19933,6 +19934,13 @@ snapshots:
       object-inspect: 1.12.3
       tslib: 2.6.2
 
+  '@graphql-inspector/core@5.1.0-alpha-20231208113249-34700c8a(graphql@16.11.0)':
+    dependencies:
+      dependency-graph: 0.11.0
+      graphql: 16.11.0
+      object-inspect: 1.12.3
+      tslib: 2.6.2
+
   '@graphql-inspector/core@5.1.0-alpha-20231208113249-34700c8a(graphql@16.9.0)':
     dependencies:
       dependency-graph: 0.11.0

From a4978067e5c30a37d56361aa7820cf490c2066f6 Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Sat, 22 Mar 2025 18:19:15 +0100
Subject: [PATCH 009/123] asd

---
 packages/web/app/src/pages/target-traces.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 25eeedc965..5e73ca6ef3 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1315,13 +1315,11 @@ function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
   );
 }
 
-function TraceSheet(props: { trace: Trace | null }) {
+function TraceSheet(props: { trace: DocumentType<typeof TracesList_Trace> | null }) {
   const targetRef = useTargetReference();
   const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
   const trace = props.trace;
 
-  return null;
-
   if (!trace) {
     return null;
   }
@@ -1329,12 +1327,12 @@ function TraceSheet(props: { trace: Trace | null }) {
   const attributes: Array<TraceAttribute> = [
     {
       name: 'graphql.operationKind',
-      value: trace.kind,
+      value: trace.operationType,
       category: 'GraphQL',
     },
     {
       name: 'graphql.subgraphs',
-      value: trace.subgraphNames.join(', '),
+      value: trace.subgraphs.join(', '),
       category: 'GraphQL',
     },
     {
@@ -1359,7 +1357,7 @@ function TraceSheet(props: { trace: Trace | null }) {
     },
     {
       name: 'http.status',
-      value: trace.httpStatus,
+      value: trace.httpStatusCode,
       category: 'HTTP',
     },
   ];
@@ -1373,7 +1371,7 @@ function TraceSheet(props: { trace: Trace | null }) {
           <SheetTitle className="text-lg font-medium text-white">
             {trace.operationName}
             <span className="text-muted-foreground ml-2 font-mono font-normal">
-              {trace.operationHash.substring(0, 4)}
+              {trace.id.substring(0, 4)}
             </span>
           </SheetTitle>
         </div>
@@ -1389,12 +1387,10 @@ function TraceSheet(props: { trace: Trace | null }) {
             variant="outline"
             className={cn(
               'rounded-sm border-0 px-1 font-medium uppercase',
-              trace.status === 'ok'
-                ? 'bg-green-900/30 text-green-400'
-                : 'bg-red-900/30 text-red-400',
+              trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
             )}
           >
-            {trace.status}
+            {trace.success ? 'Ok' : 'Error'}
           </Badge>
           <span className="font-mono uppercase text-gray-300">
             {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}

From bdd26956f2b4a33df0038fa364b623f0d45e04c1 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 28 May 2025 15:20:11 +0200
Subject: [PATCH 010/123] otel database migrations

---
 docker/configs/otel-collector/config.yaml     |   2 +-
 docker/docker-compose.dev.yml                 |   2 +-
 .../src/clickhouse-actions/015-otel-trace.ts  | 163 ++++++++++++++++++
 packages/migrations/src/clickhouse.ts         |   1 +
 4 files changed, 166 insertions(+), 2 deletions(-)
 create mode 100644 packages/migrations/src/clickhouse-actions/015-otel-trace.ts

diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 3804d72036..4f6c966b70 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -37,7 +37,7 @@ exporters:
     async_insert: true
     username: test
     password: test
-    create_schema: true
+    create_schema: false
     ttl: 720h
     compress: lz4
     logs_table_name: otel_logs
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index d02d0cdc83..f634768d5e 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -183,7 +183,7 @@ services:
         condition: service_healthy
     build:
       context: ./configs/otel-collector
-      dockerfile: ../otel-collector.dockerfile
+      dockerfile: ./../../otel-collector.dockerfile
     environment:
       HIVE_OTEL_AUTH_ENDPOINT: 'http://host.docker.internal:3001/otel-auth'
     volumes:
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
new file mode 100644
index 0000000000..9a5d2f792c
--- /dev/null
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -0,0 +1,163 @@
+import type { Action } from '../clickhouse';
+
+export const action: Action = async exec => {
+  // Base tables as created by otel-exporter clickhouse
+  await exec(`
+    CREATE TABLE IF NOT EXISTS "otel_traces" (
+      "Timestamp" DateTime64(9) CODEC(Delta(8), ZSTD(1))
+      , "TraceId" String CODEC(ZSTD(1))
+      , "SpanId" String CODEC(ZSTD(1))
+      , "ParentSpanId" String CODEC(ZSTD(1))
+      , "TraceState" String CODEC(ZSTD(1))
+      , "SpanName" LowCardinality(String) CODEC(ZSTD(1))
+      , "SpanKind" LowCardinality(String) CODEC(ZSTD(1))
+      , "ServiceName" LowCardinality(String) CODEC(ZSTD(1))
+      , "ResourceAttributes" Map(LowCardinality(String), String) CODEC(ZSTD(1))
+      , "ScopeName" String CODEC(ZSTD(1))
+      , "ScopeVersion" String CODEC(ZSTD(1))
+      , "SpanAttributes" Map(LowCardinality(String), String) CODEC(ZSTD(1))
+      , "Duration" UInt64 CODEC(ZSTD(1))
+      , "StatusCode" LowCardinality(String) CODEC(ZSTD(1))
+      , "StatusMessage" String CODEC(ZSTD(1))
+      , "Events.Timestamp" Array(DateTime64(9)) CODEC(ZSTD(1))
+      , "Events.Name" Array(LowCardinality(String)) CODEC(ZSTD(1))
+      , "Events.Attributes" Array(Map(LowCardinality(String), String)) CODEC(ZSTD(1))
+      , "Links.TraceId" Array(String) CODEC(ZSTD(1))
+      , "Links.SpanId" Array(String) CODEC(ZSTD(1))
+      , "Links.TraceState" Array(String) CODEC(ZSTD(1))
+      , "Links.Attributes" Array(Map(LowCardinality(String), String)) CODEC(ZSTD(1))
+      , INDEX "idx_trace_id" "TraceId" TYPE bloom_filter(0.001) GRANULARITY 1
+      , INDEX "idx_res_attr_key" mapKeys("ResourceAttributes") TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_res_attr_value" mapValues("ResourceAttributes") TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_span_attr_key" mapKeys("SpanAttributes") TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_span_attr_value" mapValues("SpanAttributes") TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_duration" Duration TYPE minmax GRANULARITY 1
+    )
+    ENGINE = MergeTree
+    PARTITION BY toDate("Timestamp")
+    ORDER BY (
+      "ServiceName"
+      , "SpanName"
+      , toDateTime("Timestamp")
+    )
+    TTL toDate("Timestamp") + toIntervalDay(365)
+    SETTINGS
+     index_granularity = 8192
+     , ttl_only_drop_parts = 1
+  `);
+
+  await exec(`
+    CREATE TABLE IF NOT EXISTS "otel_traces_trace_id_ts" (
+      "TraceId" String CODEC(ZSTD(1))
+      , "Start" DateTime CODEC(Delta(4), ZSTD(1))
+      , "End" DateTime CODEC(Delta(4), ZSTD(1))
+      , INDEX "idx_trace_id" "TraceId" TYPE bloom_filter(0.01) GRANULARITY 1
+    )
+    ENGINE = MergeTree
+    PARTITION BY toDate(Start)
+    ORDER BY (
+      "TraceId"
+      , "Start"
+    )
+    TTL toDate("Start") + toIntervalDay(365)
+    SETTINGS
+     index_granularity = 8192
+     , ttl_only_drop_parts = 1
+  `);
+
+  await exec(`
+    CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_traces_trace_id_ts_mv" TO "otel_traces_trace_id_ts" (
+      "TraceId" String
+      , "Start" DateTime64(9)
+      , "End" DateTime64(9)
+    )
+    AS (
+      SELECT
+        "TraceId"
+        , min("Timestamp") AS "Start"
+        , max("Timestamp") AS "End"
+      FROM
+        "otel_traces"
+      WHERE
+        "TraceId" != ''
+      GROUP BY
+        "TraceId"
+    )
+  `);
+
+  // Our own custom materialized views based on the base tables
+  await exec(`
+    CREATE TABLE IF NOT EXISTS "otel_traces_normalized" (
+      "target_id" LowCardinality(String) CODEC(ZSTD(1))
+      , "trace_id" String CODEC(ZSTD(1))
+      , "span_id" String CODEC(ZSTD(1))
+      , "timestamp" DateTime('UTC') CODEC(DoubleDelta, LZ4)
+      , "operation_name" String CODEC(ZSTD(1))
+      , "operation_type" LowCardinality(String) CODEC(ZSTD(1))
+      , "operation_body" String CODEC(ZSTD(1))
+      , "duration" UInt64 CODEC(T64, ZSTD(1))
+      , "subgraph_names" Array(LowCardinality(String)) CODEC(ZSTD(1))
+      , "http_status_code" String CODEC(ZSTD(1))
+      , "http_method" String CODEC(ZSTD(1))
+      , "http_host" String CODEC(ZSTD(1))
+      , "http_route" String CODEC(ZSTD(1))
+      , "http_url" String CODEC(ZSTD(1))
+      , INDEX "idx_operation_name" "operation_name" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_operation_type" "operation_type" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_duration" "duration" TYPE minmax GRANULARITY 1
+      , INDEX "idx_subgraph_names" "subgraph_names" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_http_status_code" "http_status_code" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_http_method" "http_method" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_http_host" "http_host" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_http_route" "http_route" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_http_url" "http_url" TYPE bloom_filter(0.01) GRANULARITY 1
+    )
+    ENGINE = MergeTree
+    PARTITION BY toDate(timestamp)
+    ORDER BY ("target_id", "timestamp")
+    TTL toDateTime(timestamp) + toIntervalDay(365)
+    SETTINGS
+      index_granularity = 8192
+      , ttl_only_drop_parts = 1
+  `);
+
+  await exec(`
+    CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_traces_normalized_mv" TO "otel_traces_normalized" (
+      "trace_id" String
+      , "span_id" String
+      , "timestamp" DateTime('UTC')
+      , "operation_name" String
+      , "operation_type" LowCardinality(String)
+      , "target_id" LowCardinality(String)
+      , "duration" UInt64
+      , "operation_body" String
+      , "subgraph_names" Array(String)
+      , "http_status_code" String
+      , "http_host" String
+      , "http_method" String
+      , "http_route" String
+      , "http_url" String
+    )
+    AS (
+      SELECT
+        "TraceId" as "trace_id"
+        , "SpanId" AS "span_id"
+        , toDateTime("Timestamp", 'UTC') AS "timestamp"
+        , "SpanAttributes"['graphql.operation.name'] AS operation_name
+        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "operation_type"
+        , toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
+        , "Duration" AS "duration"
+        , "SpanAttributes"['graphql.operation.document'] AS "operation_body"
+        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['subgraph.names'])) AS "subgraph_names"
+        , "SpanAttributes"['http.status_code'] AS "http_status_code"
+        , "SpanAttributes"['http.host'] AS "http_host"
+        , "SpanAttributes"['http.method'] AS "http_method"
+        , "SpanAttributes"['http.route'] AS "http_route"
+        , "SpanAttributes"['http.url'] AS "http_url"
+      FROM
+        "otel_traces"
+      WHERE
+        empty("ParentSpanId")
+    )
+  `);
+};
diff --git a/packages/migrations/src/clickhouse.ts b/packages/migrations/src/clickhouse.ts
index f63b558602..56e617d4bf 100644
--- a/packages/migrations/src/clickhouse.ts
+++ b/packages/migrations/src/clickhouse.ts
@@ -175,6 +175,7 @@ export async function migrateClickHouse(
     import('./clickhouse-actions/012-coordinates-typename-index'),
     import('./clickhouse-actions/013-apply-ttl'),
     import('./clickhouse-actions/014-audit-logs-access-token'),
+    import('./clickhouse-actions/015-otel-trace'),
   ]);
 
   async function actionRunner(action: Action, index: number) {

From 2c11feb90adc2736c9ead11f65927928d28521ae Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 28 May 2025 16:02:37 +0200
Subject: [PATCH 011/123] sort columns and indices

---
 .../src/clickhouse-actions/015-otel-trace.ts  | 48 +++++++++++--------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 9a5d2f792c..395196e068 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -92,28 +92,32 @@ export const action: Action = async exec => {
       , "trace_id" String CODEC(ZSTD(1))
       , "span_id" String CODEC(ZSTD(1))
       , "timestamp" DateTime('UTC') CODEC(DoubleDelta, LZ4)
-      , "operation_name" String CODEC(ZSTD(1))
-      , "operation_type" LowCardinality(String) CODEC(ZSTD(1))
-      , "operation_body" String CODEC(ZSTD(1))
       , "duration" UInt64 CODEC(T64, ZSTD(1))
-      , "subgraph_names" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , "http_status_code" String CODEC(ZSTD(1))
       , "http_method" String CODEC(ZSTD(1))
       , "http_host" String CODEC(ZSTD(1))
       , "http_route" String CODEC(ZSTD(1))
       , "http_url" String CODEC(ZSTD(1))
-      , INDEX "idx_operation_name" "operation_name" TYPE bloom_filter(0.01) GRANULARITY 1
-      , INDEX "idx_operation_type" "operation_type" TYPE bloom_filter(0.01) GRANULARITY 1
+      , "client_name" String Codec(ZSTD(1))
+      , "client_version" String Codec(ZSTD(1))
+      , "graphql_operation_name" String CODEC(ZSTD(1))
+      , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
+      , "graphql_operation_document" String CODEC(ZSTD(1))
+      , "subgraph_names" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , INDEX "idx_duration" "duration" TYPE minmax GRANULARITY 1
-      , INDEX "idx_subgraph_names" "subgraph_names" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_http_status_code" "http_status_code" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_http_method" "http_method" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_http_host" "http_host" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_http_route" "http_route" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_http_url" "http_url" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_client_name" "client_name" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_client_version" "client_version" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_graphql_operation_name" "graphql_operation_name" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_graphql_operation_type" "graphql_operation_type" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_subgraph_names" "subgraph_names" TYPE bloom_filter(0.01) GRANULARITY 1
     )
     ENGINE = MergeTree
-    PARTITION BY toDate(timestamp)
+    PARTITION BY toDate("timestamp")
     ORDER BY ("target_id", "timestamp")
     TTL toDateTime(timestamp) + toIntervalDay(365)
     SETTINGS
@@ -123,37 +127,41 @@ export const action: Action = async exec => {
 
   await exec(`
     CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_traces_normalized_mv" TO "otel_traces_normalized" (
-      "trace_id" String
+      , "target_id" LowCardinality(String)
+      , "trace_id" String
       , "span_id" String
       , "timestamp" DateTime('UTC')
-      , "operation_name" String
-      , "operation_type" LowCardinality(String)
-      , "target_id" LowCardinality(String)
       , "duration" UInt64
-      , "operation_body" String
-      , "subgraph_names" Array(String)
       , "http_status_code" String
       , "http_host" String
       , "http_method" String
       , "http_route" String
       , "http_url" String
+      , "client_name" String
+      , "client_version" String
+      , "graphql_operation_name" String
+      , "graphql_operation_type" LowCardinality(String)
+      , "graphql_operation_document" String
+      , "subgraph_names" Array(String)
     )
     AS (
       SELECT
-        "TraceId" as "trace_id"
+        toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
+        , "TraceId" as "trace_id"
         , "SpanId" AS "span_id"
         , toDateTime("Timestamp", 'UTC') AS "timestamp"
-        , "SpanAttributes"['graphql.operation.name'] AS operation_name
-        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "operation_type"
-        , toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
         , "Duration" AS "duration"
-        , "SpanAttributes"['graphql.operation.document'] AS "operation_body"
-        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['subgraph.names'])) AS "subgraph_names"
         , "SpanAttributes"['http.status_code'] AS "http_status_code"
         , "SpanAttributes"['http.host'] AS "http_host"
         , "SpanAttributes"['http.method'] AS "http_method"
         , "SpanAttributes"['http.route'] AS "http_route"
         , "SpanAttributes"['http.url'] AS "http_url"
+        , "SpanAttributes"['hive.client.name'] AS "client_name"
+        , "SpanAttributes"['hive.client.version'] AS "client_version"
+        , "SpanAttributes"['graphql.operation.name'] AS "graphql_operation_name"
+        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
+        , "SpanAttributes"['graphql.operation.document'] AS "graphql_operation_document"
+        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
       FROM
         "otel_traces"
       WHERE

From e8c82e4d608259fda5b6cedb01876e0732644064 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 28 May 2025 16:17:40 +0200
Subject: [PATCH 012/123] lets include codes

---
 .../migrations/src/clickhouse-actions/015-otel-trace.ts    | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 395196e068..574eecf703 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -103,6 +103,8 @@ export const action: Action = async exec => {
       , "graphql_operation_name" String CODEC(ZSTD(1))
       , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
       , "graphql_operation_document" String CODEC(ZSTD(1))
+      , "graphql_error_count" UInt32 CODEC(T64, ZSTD(1))
+      , "graphql_error_codes" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , "subgraph_names" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , INDEX "idx_duration" "duration" TYPE minmax GRANULARITY 1
       , INDEX "idx_http_status_code" "http_status_code" TYPE bloom_filter(0.01) GRANULARITY 1
@@ -114,6 +116,7 @@ export const action: Action = async exec => {
       , INDEX "idx_client_version" "client_version" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_graphql_operation_name" "graphql_operation_name" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_graphql_operation_type" "graphql_operation_type" TYPE bloom_filter(0.01) GRANULARITY 1
+      , INDEX "idx_graphql_error_codes" "graphql_error_codes" TYPE bloom_filter(0.01) GRANULARITY 1
       , INDEX "idx_subgraph_names" "subgraph_names" TYPE bloom_filter(0.01) GRANULARITY 1
     )
     ENGINE = MergeTree
@@ -142,6 +145,8 @@ export const action: Action = async exec => {
       , "graphql_operation_name" String
       , "graphql_operation_type" LowCardinality(String)
       , "graphql_operation_document" String
+      , "graphql_error_count" UInt32
+      , "graphql_error_codes" Array(LowCardinality(String))
       , "subgraph_names" Array(String)
     )
     AS (
@@ -161,6 +166,8 @@ export const action: Action = async exec => {
         , "SpanAttributes"['graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['graphql.error.count'] AS "graphql_errors_count"
+        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['graphql.error.codes'])) AS "graphql_error_codes"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
       FROM
         "otel_traces"

From 2b3ce24c7a06e3593915914e8c1d65c55680a9ce Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 30 May 2025 13:06:28 +0200
Subject: [PATCH 013/123] prefix spans with `hive`

---
 .../migrations/src/clickhouse-actions/015-otel-trace.ts   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 574eecf703..4d590519fe 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -163,11 +163,11 @@ export const action: Action = async exec => {
         , "SpanAttributes"['http.url'] AS "http_url"
         , "SpanAttributes"['hive.client.name'] AS "client_name"
         , "SpanAttributes"['hive.client.version'] AS "client_version"
-        , "SpanAttributes"['graphql.operation.name'] AS "graphql_operation_name"
+        , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
-        , "SpanAttributes"['graphql.operation.document'] AS "graphql_operation_document"
-        , "SpanAttributes"['graphql.error.count'] AS "graphql_errors_count"
-        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['graphql.error.codes'])) AS "graphql_error_codes"
+        , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_errors_count"
+        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
       FROM
         "otel_traces"

From 55d9011d7e2e5f2256f18b089a9b674a97f838b7 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 30 May 2025 13:28:44 +0200
Subject: [PATCH 014/123] fix typo

---
 packages/migrations/src/clickhouse-actions/015-otel-trace.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 4d590519fe..f98fc3194e 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -130,7 +130,7 @@ export const action: Action = async exec => {
 
   await exec(`
     CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_traces_normalized_mv" TO "otel_traces_normalized" (
-      , "target_id" LowCardinality(String)
+      "target_id" LowCardinality(String)
       , "trace_id" String
       , "span_id" String
       , "timestamp" DateTime('UTC')

From 7cfe165231ddda01b7adaa9f80d14fc17530bfd6 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 30 May 2025 13:35:37 +0200
Subject: [PATCH 015/123] lol

---
 packages/services/server/src/index.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/services/server/src/index.ts b/packages/services/server/src/index.ts
index c1caf21fa6..479727eeb4 100644
--- a/packages/services/server/src/index.ts
+++ b/packages/services/server/src/index.ts
@@ -65,8 +65,8 @@ import { asyncStorage } from './async-storage';
 import { env } from './environment';
 import { graphqlHandler } from './graphql-handler';
 import { clickHouseElapsedDuration, clickHouseReadDuration } from './metrics';
-import { createPublicGraphQLHandler } from './public-graphql-handler';
 import { createOtelAuthEndpoint } from './otel-auth-endpoint';
+import { createPublicGraphQLHandler } from './public-graphql-handler';
 import { initSupertokens, oidcIdLookup } from './supertokens';
 
 export async function main() {
@@ -460,6 +460,10 @@ export async function main() {
       handler: graphql,
     });
 
+    const authN = new AuthN({
+      strategies: [organizationAccessTokenStrategy],
+    });
+
     server.route({
       method: ['GET', 'POST'],
       url: '/graphql-public',
@@ -467,9 +471,7 @@ export async function main() {
         registry,
         logger: logger as any,
         hiveUsageConfig: env.hive,
-        authN: new AuthN({
-          strategies: [organizationAccessTokenStrategy],
-        }),
+        authN,
         tracing,
       }),
     });

From ef1c4e290cdffde38a06e788cf05fb914fa915e0 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 30 May 2025 14:46:34 +0200
Subject: [PATCH 016/123] fix typos

---
 .../src/clickhouse-actions/015-otel-trace.ts   |  2 +-
 .../src/modules/operations/resolvers/Target.ts | 18 ++++++++++--------
 .../resolvers/TracesFilterOptions.ts           |  8 ++++----
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index f98fc3194e..4fe12a57e3 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -164,7 +164,7 @@ export const action: Action = async exec => {
         , "SpanAttributes"['hive.client.name'] AS "client_name"
         , "SpanAttributes"['hive.client.version'] AS "client_version"
         , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
-        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
+        , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
         , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_errors_count"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index a231d2612a..af425b20f6 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -74,11 +74,11 @@ export const Target: Pick<
       schemaCoordinate: args.schemaCoordinate,
     };
   },
-  traces: async (_parent, { first, filter }, { injector }) => {
+  traces: async (target, { first, filter }, { injector }) => {
     const clickhouse = injector.get(ClickHouse);
     const limit = (first ?? 10) + 1;
 
-    const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
+    const ANDs: SqlValue[] = [sql`target_id = ${target.id}`];
 
     if (filter?.id?.length) {
       ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
@@ -101,11 +101,11 @@ export const Target: Pick<
     }
 
     if (filter?.operationName?.length) {
-      ANDs.push(sql`operation_name IN (${sql.array(filter.operationName, 'String')})`);
+      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
     }
 
     if (filter?.operationType?.length) {
-      ANDs.push(sql`operation_type IN (${sql.array(filter.operationType, 'String')})`);
+      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
     }
 
     if (filter?.subgraphs?.length) {
@@ -155,8 +155,8 @@ export const Target: Pick<
           trace_id,
           span_id,
           timestamp,
-          operation_name,
-          operation_type,
+          graphql_operation_name as operation_name,
+          graphql_operation_type as operation_type,
           duration,
           subgraph_names,
           http_status_code,
@@ -176,6 +176,8 @@ export const Target: Pick<
     const traces = tracesQuery.data;
     let hasNext = false;
 
+    console.log('AYAYAYAY', traces.length);
+
     if (traces.length == limit) {
       hasNext = true;
       (traces as any).pop();
@@ -241,11 +243,11 @@ export const Target: Pick<
     }
 
     if (filter?.operationName?.length) {
-      ANDs.push(sql`operation_name IN (${sql.array(filter.operationName, 'String')})`);
+      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
     }
 
     if (filter?.operationType?.length) {
-      ANDs.push(sql`operation_type IN (${sql.array(filter.operationType, 'String')})`);
+      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
     }
 
     if (filter?.subgraphs?.length) {
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index 936d923403..2c4848f66e 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -55,16 +55,16 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
   },
   operationName: async ({ loader }, { top }) => {
     return loader.load({
-      key: 'operation_name',
-      columnExpression: 'operation_name',
+      key: 'graphql_operation_name',
+      columnExpression: 'graphql_operation_name',
       limit: top ?? 5,
       arrayJoinColumn: null,
     });
   },
   operationType: async ({ loader }) => {
     return loader.load({
-      key: 'operation_type',
-      columnExpression: 'operation_type',
+      key: 'graphql_operation_type',
+      columnExpression: 'graphql_operation_type',
       limit: null,
       arrayJoinColumn: null,
     });

From 71509fe55782f87cd392b4629e70aa813fe3705b Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 2 Jun 2025 12:51:11 +0200
Subject: [PATCH 017/123] wip

---
 configs/gateway.config.ts                     | 217 ++++++++++++++++++
 .../otel-collector/builder-config.yaml        |   2 +
 docker/configs/otel-collector/config.yaml     |  23 +-
 .../src/clickhouse-actions/015-otel-trace.ts  |   2 +-
 .../modules/operations/resolvers/Target.ts    |  35 +--
 5 files changed, 260 insertions(+), 19 deletions(-)
 create mode 100644 configs/gateway.config.ts

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
new file mode 100644
index 0000000000..e4aa5c0df8
--- /dev/null
+++ b/configs/gateway.config.ts
@@ -0,0 +1,217 @@
+/**
+ * Hive Gateway Config with a Hive Console Specific Span Processor.
+ *
+ * ```sh
+ * docker run --name hive-gateway --rm -p 4000:4000 \
+ *   -v $(pwd)/configs/gateway.config.ts:/gateway/gateway.config.ts \
+ *   -e HIVE_ORGANIZATION_ACCESS_TOKEN="<organization_access_key>"
+ *   -e HIVE_TARGET_REF="<target_ref>"
+ *   -e DEBUG=1
+ *   ghcr.io/graphql-hive/gateway supergraph \
+ *   "http://host.docker.internal:3001/artifacts/v1/<target_id>" \
+ *   --hive-cdn-key '<cdn_key>'
+ * ````
+ */
+import { createOtlpHttpExporter, defineConfig, GatewayPlugin } from '@graphql-hive/gateway';
+import type { MeshFetchRequestInit } from '@graphql-mesh/types';
+import { Span, SpanProcessor } from '@opentelemetry/sdk-trace-base';
+
+// The following plugin is used to trace the fetch calls made by Mesh.
+const useOnFetchTracer = (): GatewayPlugin => {
+  const upstreamCallHeaders: Array<{
+    url: string;
+    headers: MeshFetchRequestInit['headers'];
+  }> = [];
+
+  return {
+    onFetch({ url, options }) {
+      upstreamCallHeaders.push({ url, headers: options.headers });
+    },
+    onRequest({ request, url, endResponse, fetchAPI }) {
+      if (url.pathname === '/upstream-fetch' && request.method === 'GET') {
+        endResponse(fetchAPI.Response.json(upstreamCallHeaders));
+        return;
+      }
+    },
+    onExecute({ context }) {
+      const span: Span | undefined = context.opentelemetry
+        .activeContext()
+        ._currentContext.values()
+        .next().value;
+
+      if (!span) {
+        return;
+      }
+      return {
+        onExecuteDone(ctx) {
+          const errors = new Set<string>();
+          if (ctx.result?.errors) {
+            for (const err of ctx.result.errors) {
+              if (err.extensions?.code && typeof err.extensions.code === 'string') {
+                errors.add(err.extensions.code);
+              }
+            }
+          }
+          if (errors.size) {
+            span.setAttribute('hive.graphql.error.codes', Array.from(errors).join(','));
+          }
+        },
+      };
+    },
+  };
+};
+
+class HiveTracingSpanProcessor implements SpanProcessor {
+  private activeSpans: Map<string, Map<string, Span>> = new Map();
+  private rootSpanIds: Map<string, string> = new Map();
+  private subgraphNames: Map<string, Set<string>> = new Map();
+
+  onStart(span: Span): void {
+    const spanContext = span.spanContext();
+    const traceId = spanContext.traceId;
+    const spanId = spanContext.spanId;
+
+    // Initialize trace data structures if needed
+    if (!this.activeSpans.has(traceId)) {
+      this.activeSpans.set(traceId, new Map());
+    }
+    if (!this.subgraphNames.has(traceId)) {
+      this.subgraphNames.set(traceId, new Set());
+    }
+
+    this.activeSpans.get(traceId)!.set(spanId, span);
+
+    // If this is a root span (no parent), mark it as the root span for this trace
+    if (!span.parentSpanId) {
+      this.rootSpanIds.set(traceId, spanId);
+    }
+
+    // Check if this is a subgraph execution span
+    if (span.name && span.name.startsWith('subgraph.execute')) {
+      const subgraphName = span.attributes['gateway.upstream.subgraph.name'];
+      if (subgraphName && typeof subgraphName === 'string') {
+        this.subgraphNames.get(traceId)!.add(subgraphName);
+      }
+    }
+  }
+
+  onEnd(span: Span): void {
+    const spanContext = span.spanContext();
+    const traceId = spanContext.traceId;
+    const spanId = spanContext.spanId;
+
+    // Skip if we don't have this trace
+    if (!this.activeSpans.has(traceId)) {
+      return;
+    }
+
+    const spansForTrace = this.activeSpans.get(traceId)!;
+    const rootSpanId = this.rootSpanIds.get(traceId);
+    const subgraphNamesForTrace = this.subgraphNames.get(traceId);
+
+    // Check if this is the GraphQL execute span we're interested in
+    // TODO: can we have this fully type safe?
+    if (span.name === 'graphql.execute') {
+      const operationType = span.attributes['graphql.operation.type'];
+      const operationName = span.attributes['graphql.operation.name'];
+      const errorCount = span.attributes['graphql.error.count'];
+      const document = span.attributes['graphql.document'];
+
+      if (rootSpanId) {
+        const rootSpan = spansForTrace.get(rootSpanId);
+        if (rootSpan && !rootSpan.ended) {
+          // Update the name of the root span
+          if (operationType && document) {
+            rootSpan.updateName(`${operationType} ${operationName}`);
+
+            // Copy attributes to root span
+            rootSpan.setAttribute('hive.graphql.operation.type', operationType);
+            rootSpan.setAttribute('hive.graphql.operation.name', operationName ?? '');
+            rootSpan.setAttribute('hive.graphql.operation.document', document);
+
+            if (errorCount !== undefined)
+              rootSpan.setAttribute('hive.graphql.error.count', errorCount);
+
+            // Add the subgraph names as a comma-separated list
+            if (subgraphNamesForTrace && subgraphNamesForTrace.size > 0) {
+              rootSpan.setAttribute(
+                'hive.subgraph.names',
+                Array.from(subgraphNamesForTrace).join(','),
+              );
+            }
+          }
+        }
+      }
+    }
+
+    // For any subgraph span that's ending, make sure we capture its name
+    if (span.name && span.name.startsWith('subgraph.execute')) {
+      const subgraphName = span.attributes['gateway.upstream.subgraph.name'];
+      if (subgraphName && typeof subgraphName === 'string' && subgraphNamesForTrace) {
+        subgraphNamesForTrace.add(subgraphName);
+
+        // Update root span with current list of subgraph names
+        if (rootSpanId) {
+          const rootSpan = spansForTrace.get(rootSpanId);
+          if (rootSpan && !rootSpan.ended) {
+            rootSpan.setAttribute(
+              'hive.subgraph.names',
+              Array.from(subgraphNamesForTrace).join(','),
+            );
+          }
+        }
+      }
+    }
+
+    // Clean up the span reference
+    spansForTrace.delete(spanId);
+
+    // If this is the root span or if no spans remain, clean up the trace
+    if (rootSpanId === spanId || spansForTrace.size === 0) {
+      this.activeSpans.delete(traceId);
+      this.rootSpanIds.delete(traceId);
+      this.subgraphNames.delete(traceId);
+      if (process.env.DEBUG === '1') {
+        console.log('span attributes', span.attributes);
+      }
+    }
+  }
+
+  async forceFlush(): Promise<void> {
+    // Clear all processor state
+    this.activeSpans.clear();
+    this.rootSpanIds.clear();
+    this.subgraphNames.clear();
+  }
+
+  async shutdown(): Promise<void> {
+    // Clean up resources when shutting down
+    await this.forceFlush();
+  }
+}
+async function createHiveTracingSpanProcessor(): Promise<HiveTracingSpanProcessor> {
+  return new HiveTracingSpanProcessor();
+}
+
+export const gatewayConfig = defineConfig({
+  openTelemetry: {
+    exporters: [
+      createHiveTracingSpanProcessor(),
+      createOtlpHttpExporter(
+        {
+          url: 'http://host.docker.internal:4318/v1/traces',
+          headers: {
+            Authorization: `Bearer ${process.env.HIVE_ORGANIZATION_ACCESS_TOKEN}`,
+            'X-Hive-Target-Ref': process.env.HIVE_TARGET_REF,
+          },
+        },
+        // Batching config is set in order to make it easier to test.
+        {
+          scheduledDelayMillis: 1,
+        },
+      ),
+    ],
+    serviceName: 'hive-gateway',
+  },
+  plugins: () => [useOnFetchTracer()],
+});
diff --git a/docker/configs/otel-collector/builder-config.yaml b/docker/configs/otel-collector/builder-config.yaml
index 8242a77fee..85b88a32ad 100644
--- a/docker/configs/otel-collector/builder-config.yaml
+++ b/docker/configs/otel-collector/builder-config.yaml
@@ -12,6 +12,8 @@ processors:
   - gomod:
       github.com/open-telemetry/opentelemetry-collector-contrib/processor/attributesprocessor
       v0.122.0
+  - gomod:
+      github.com/open-telemetry/opentelemetry-collector-contrib/processor/filterprocessor v0.122.0
 
 exporters:
   - gomod: go.opentelemetry.io/collector/exporter/debugexporter v0.122.0
diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 4f6c966b70..068a437f6d 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -26,6 +26,23 @@ processors:
       - key: hive.target_id
         from_context: auth.targetId
         action: insert
+  filter/drop_missing_attributes:
+    error_mode: ignore
+    traces:
+      span:
+        # prettier-ignore
+        - not (
+            attributes["http.status"] != nil and
+            attributes["http.host"] != nil and
+            attributes["http.method"] != nil and
+            attributes["http.route"] != nil and
+            attributes["http.url"] != nil and
+            (
+              attributes["hive.graphql.operation.type"] == "query" or
+              attributes["hive.graphql.operation.type"] == "mutation" or
+              attributes["hive.graphql.operation.type"] == "subscription"
+            )
+          )
 exporters:
   # debug:
   #   verbosity: detailed
@@ -61,5 +78,9 @@ service:
   pipelines:
     traces:
       receivers: [otlp]
-      processors: [attributes, batch]
+      processors: [
+          attributes,
+          # filter/drop_missing_attributes,
+          batch,
+        ]
       exporters: [clickhouse]
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 4fe12a57e3..ecf620d3a1 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -166,7 +166,7 @@ export const action: Action = async exec => {
         , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
-        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_errors_count"
+        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
       FROM
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index af425b20f6..9897c416c8 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -151,22 +151,25 @@ export const Target: Pick<
     }>({
       query: sql`
         SELECT
-          target_id,
-          trace_id,
-          span_id,
-          timestamp,
-          graphql_operation_name as operation_name,
-          graphql_operation_type as operation_type,
-          duration,
-          subgraph_names,
-          http_status_code,
-          http_method,
-          http_host,
-          http_route,
-          http_url
-        FROM otel_traces_normalized
+          "target_id"
+          , "trace_id"
+          , "span_id"
+          , "timestamp"
+          , "http_status_code"
+          , "http_method"
+          , "http_host"
+          , "http_route"
+          , "http_url"
+          , "duration"
+          , "graphql_operation_name" AS "operation_name"
+          , upper("graphql_operation_type") AS "operation_type"
+          , "subgraph_names"
+        FROM
+          "otel_traces_normalized"
         WHERE ${sql.join(ANDs, ' AND ')}
-        ORDER BY timestamp DESC, trace_id DESC
+        ORDER BY
+          "timestamp" DESC
+          , "trace_id" DESC
         LIMIT ${sql.raw(String(limit))}
       `,
       queryId: 'traces',
@@ -176,8 +179,6 @@ export const Target: Pick<
     const traces = tracesQuery.data;
     let hasNext = false;
 
-    console.log('AYAYAYAY', traces.length);
-
     if (traces.length == limit) {
       hasNext = true;
       (traces as any).pop();

From 47928638b20b3d9de0ce43f0a9392b979febecbc Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 2 Jun 2025 12:51:31 +0200
Subject: [PATCH 018/123] add example sdl

---
 .../examples/getting-started/products.graphql   | 10 ++++++++++
 .../examples/getting-started/reviews.graphql    | 17 +++++++++++++++++
 .../cli/examples/getting-started/users.graphql  | 11 +++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 packages/libraries/cli/examples/getting-started/products.graphql
 create mode 100644 packages/libraries/cli/examples/getting-started/reviews.graphql
 create mode 100644 packages/libraries/cli/examples/getting-started/users.graphql

diff --git a/packages/libraries/cli/examples/getting-started/products.graphql b/packages/libraries/cli/examples/getting-started/products.graphql
new file mode 100644
index 0000000000..539fa6c70e
--- /dev/null
+++ b/packages/libraries/cli/examples/getting-started/products.graphql
@@ -0,0 +1,10 @@
+extend type Query {
+  topProducts(first: Int = 5): [Product]
+}
+
+type Product @key(fields: "upc") {
+  upc: String!
+  name: String
+  price: Int
+  weight: Int
+}
diff --git a/packages/libraries/cli/examples/getting-started/reviews.graphql b/packages/libraries/cli/examples/getting-started/reviews.graphql
new file mode 100644
index 0000000000..bee04bb5ae
--- /dev/null
+++ b/packages/libraries/cli/examples/getting-started/reviews.graphql
@@ -0,0 +1,17 @@
+type Review @key(fields: "id") {
+  id: ID!
+  body: String
+  author: User @provides(fields: "username")
+  product: Product
+}
+
+extend type User @key(fields: "id") {
+  id: ID! @external
+  username: String @external
+  reviews: [Review]
+}
+
+extend type Product @key(fields: "upc") {
+  upc: String! @external
+  reviews: [Review]
+}
diff --git a/packages/libraries/cli/examples/getting-started/users.graphql b/packages/libraries/cli/examples/getting-started/users.graphql
new file mode 100644
index 0000000000..8e2ef4578e
--- /dev/null
+++ b/packages/libraries/cli/examples/getting-started/users.graphql
@@ -0,0 +1,11 @@
+extend type Query {
+  me: User
+  user(id: ID!): User
+  users: [User]
+}
+
+type User @key(fields: "id") {
+  id: ID!
+  name: String
+  username: String
+}

From 563ae7f1cbf5326082a93b10a31040429730757a Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 4 Jun 2025 11:12:59 +0200
Subject: [PATCH 019/123] wip

---
 .../src/clickhouse-actions/015-otel-trace.ts  | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index ecf620d3a1..22a1a7edfa 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -175,4 +175,82 @@ export const action: Action = async exec => {
         empty("ParentSpanId")
     )
   `);
+
+  // These can be used for dedicated subgraph views
+
+  // await exec(`
+  //   CREATE TABLE IF NOT EXISTS "otel_subgraph_spans" (
+  //     "target_id" LowCardinality(String) CODEC(ZSTD(1))
+  //     , "subgraph_name" String CODEC(ZSTD(1))
+  //     , "trace_id" String CODEC(ZSTD(1))
+  //     , "span_id" String CODEC(ZSTD(1))
+  //     , "timestamp" DateTime('UTC') CODEC(DoubleDelta, LZ4)
+  //     , "duration" UInt64 CODEC(T64, ZSTD(1))
+  //     , "http_status_code" String CODEC(ZSTD(1))
+  //     , "http_method" String CODEC(ZSTD(1))
+  //     , "http_host" String CODEC(ZSTD(1))
+  //     , "http_route" String CODEC(ZSTD(1))
+  //     , "http_url" String CODEC(ZSTD(1))
+  //     , "graphql_operation_name" String CODEC(ZSTD(1))
+  //     , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
+  //     , "graphql_operation_document" String CODEC(ZSTD(1))
+  //     , "graphql_error_count" UInt32 CODEC(T64, ZSTD(1))
+  //     , "graphql_error_codes" Array(LowCardinality(String)) CODEC(ZSTD(1))
+  //   )
+  //   ENGINE = MergeTree
+  //   PARTITION BY toDate("timestamp")
+  //   ORDER BY ("target_id", "subgraph_name", "timestamp")
+  //   TTL toDateTime(timestamp) + toIntervalDay(365)
+  //   SETTINGS
+  //     index_granularity = 8192
+  //     , ttl_only_drop_parts = 1
+  // `);
+
+  // await exec(`
+  //   CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_subgraph_spans_mv" TO "otel_subgraph_spans" (
+  //     "target_id" LowCardinality(String)
+  //     , "subgraph_name" Array(String)
+  //     , "trace_id" String
+  //     , "span_id" String
+  //     , "timestamp" DateTime('UTC')
+  //     , "duration" UInt64
+  //     , "http_status_code" String
+  //     , "http_host" String
+  //     , "http_method" String
+  //     , "http_route" String
+  //     , "http_url" String
+  //     , "client_name" String
+  //     , "client_version" String
+  //     , "graphql_operation_name" String
+  //     , "graphql_operation_type" LowCardinality(String)
+  //     , "graphql_operation_document" String
+  //     , "graphql_error_count" UInt32
+  //     , "graphql_error_codes" Array(LowCardinality(String))
+  //   )
+  //   AS (
+  //     SELECT
+  //       toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
+  //       , "SpanAttributes"['hive.graphql.subgraph.name'] AS "subgraph_name"
+  //       , "TraceId" as "trace_id"
+  //       , "SpanId" AS "span_id"
+  //       , toDateTime("Timestamp", 'UTC') AS "timestamp"
+  //       , "Duration" AS "duration"
+  //       , "SpanAttributes"['http.status_code'] AS "http_status_code"
+  //       , "SpanAttributes"['http.host'] AS "http_host"
+  //       , "SpanAttributes"['http.method'] AS "http_method"
+  //       , "SpanAttributes"['http.route'] AS "http_route"
+  //       , "SpanAttributes"['http.url'] AS "http_url"
+  //       , "SpanAttributes"['hive.client.name'] AS "client_name"
+  //       , "SpanAttributes"['hive.client.version'] AS "client_version"
+  //       , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
+  //       , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
+  //       , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+  //       , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
+  //       , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
+  //     FROM
+  //       "otel_traces"
+  //     WHERE
+  //       startsWith("SpanName", 'subgraph.execute')
+  //   )
+  // `);
 };

From 552468f8b5496918b9a4f729cd04fbbb80d48133 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 6 Jun 2025 14:07:50 +0200
Subject: [PATCH 020/123] moar wip

---
 .../src/clickhouse-actions/015-otel-trace.ts  |    6 +-
 .../api/src/modules/operations/index.ts       |    3 +-
 .../operations/module.graphql.mappers.ts      |    4 +
 .../src/modules/operations/module.graphql.ts  |   17 +-
 .../operations/providers/clickhouse-client.ts |   17 +
 .../modules/operations/providers/traces.ts    |  282 ++++
 .../src/modules/operations/resolvers/Span.ts  |   29 +
 .../modules/operations/resolvers/Target.ts    |  150 +-
 .../src/modules/operations/resolvers/Trace.ts |   42 +
 .../api/src/modules/shared/module.graphql.ts  |    8 +
 .../modules/shared/resolvers/DateTime64.ts    |  148 ++
 .../modules/shared/resolvers/JSONObject.ts    |    7 +
 packages/web/app/src/components/ui/button.tsx |    1 +
 packages/web/app/src/pages/target-trace.tsx   | 1213 +++++++++--------
 packages/web/app/src/router.tsx               |   11 +-
 15 files changed, 1196 insertions(+), 742 deletions(-)
 create mode 100644 packages/services/api/src/modules/operations/providers/traces.ts
 create mode 100644 packages/services/api/src/modules/operations/resolvers/Span.ts
 create mode 100644 packages/services/api/src/modules/operations/resolvers/Trace.ts
 create mode 100644 packages/services/api/src/modules/shared/resolvers/DateTime64.ts
 create mode 100644 packages/services/api/src/modules/shared/resolvers/JSONObject.ts

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 22a1a7edfa..4af6ea74b0 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -4,7 +4,7 @@ export const action: Action = async exec => {
   // Base tables as created by otel-exporter clickhouse
   await exec(`
     CREATE TABLE IF NOT EXISTS "otel_traces" (
-      "Timestamp" DateTime64(9) CODEC(Delta(8), ZSTD(1))
+      "Timestamp" DateTime64(9, 'UTC') CODEC(Delta(8), ZSTD(1))
       , "TraceId" String CODEC(ZSTD(1))
       , "SpanId" String CODEC(ZSTD(1))
       , "ParentSpanId" String CODEC(ZSTD(1))
@@ -19,7 +19,7 @@ export const action: Action = async exec => {
       , "Duration" UInt64 CODEC(ZSTD(1))
       , "StatusCode" LowCardinality(String) CODEC(ZSTD(1))
       , "StatusMessage" String CODEC(ZSTD(1))
-      , "Events.Timestamp" Array(DateTime64(9)) CODEC(ZSTD(1))
+      , "Events.Timestamp" Array(DateTime64(9, 'UTC')) CODEC(ZSTD(1))
       , "Events.Name" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , "Events.Attributes" Array(Map(LowCardinality(String), String)) CODEC(ZSTD(1))
       , "Links.TraceId" Array(String) CODEC(ZSTD(1))
@@ -172,7 +172,7 @@ export const action: Action = async exec => {
       FROM
         "otel_traces"
       WHERE
-        empty("ParentSpanId")
+        empty("ParentSpanId") AND NOT empty("SpanAttributes"['hive.graphql.operation.type'])
     )
   `);
 
diff --git a/packages/services/api/src/modules/operations/index.ts b/packages/services/api/src/modules/operations/index.ts
index a8481106a4..41f70b8a5a 100644
--- a/packages/services/api/src/modules/operations/index.ts
+++ b/packages/services/api/src/modules/operations/index.ts
@@ -2,6 +2,7 @@ import { createModule } from 'graphql-modules';
 import { ClickHouse } from './providers/clickhouse-client';
 import { OperationsManager } from './providers/operations-manager';
 import { OperationsReader } from './providers/operations-reader';
+import { Traces } from './providers/traces';
 import { resolvers } from './resolvers.generated';
 import typeDefs from './module.graphql';
 
@@ -10,5 +11,5 @@ export const operationsModule = createModule({
   dirname: __dirname,
   typeDefs,
   resolvers,
-  providers: [OperationsManager, OperationsReader, ClickHouse],
+  providers: [OperationsManager, OperationsReader, ClickHouse, Traces],
 });
diff --git a/packages/services/api/src/modules/operations/module.graphql.mappers.ts b/packages/services/api/src/modules/operations/module.graphql.mappers.ts
index 35922b47a1..099bac718b 100644
--- a/packages/services/api/src/modules/operations/module.graphql.mappers.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.mappers.ts
@@ -1,6 +1,7 @@
 import type Dataloader from 'dataloader';
 import type { ClientStatsValues, OperationStatsValues, PageInfo } from '../../__generated__/types';
 import type { DateRange } from '../../shared/entities';
+import { Span, Trace } from './providers/traces';
 
 // import { SqlValue } from './providers/sql';
 
@@ -58,3 +59,6 @@ export type TracesFilterOptionsMapper = {
     string
   >;
 };
+
+export type TraceMapper = Trace;
+export type SpanMapper = Span;
diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 83478d52fd..ba54860ca3 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -272,7 +272,7 @@ export default gql`
   type Trace {
     id: ID!
     timestamp: DateTime!
-    operationName: String!
+    operationName: String
     operationType: GraphQLOperationType!
     duration: Int!
     subgraphs: [String!]!
@@ -284,6 +284,20 @@ export default gql`
     httpHost: String
     httpRoute: String
     httpUrl: String
+
+    spans: [Span!]!
+  }
+
+  type Span {
+    id: ID!
+    traceId: ID!
+    parentId: ID
+    name: String!
+    startTime: DateTime64!
+    duration: SafeInt!
+    endTime: DateTime64!
+    resourceAttributes: JSONObject!
+    spanAttributes: JSONObject!
   }
 
   input TracesFilterInput {
@@ -335,6 +349,7 @@ export default gql`
     operation(hash: ID! @tag(name: "public")): Operation @tag(name: "public")
     traces(first: Int, after: String, filter: TracesFilterInput): TraceConnection!
     tracesFilterOptions(filter: TracesFilterInput): TracesFilterOptions!
+    trace(traceId: ID!): Trace
   }
 
   extend type Project {
diff --git a/packages/services/api/src/modules/operations/providers/clickhouse-client.ts b/packages/services/api/src/modules/operations/providers/clickhouse-client.ts
index 8735099df9..17f0b28dfc 100644
--- a/packages/services/api/src/modules/operations/providers/clickhouse-client.ts
+++ b/packages/services/api/src/modules/operations/providers/clickhouse-client.ts
@@ -120,6 +120,23 @@ export class ClickHouse {
           },
           retry: {
             calculateDelay: info => {
+              if (
+                info.error.response?.body &&
+                typeof info.error.response.body === 'object' &&
+                'exception' in info.error.response.body &&
+                typeof info.error.response.body.exception === 'string'
+              ) {
+                this.logger.error(info.error.response.body.exception);
+                // In case of development errors we don't need to retry
+                // https://github.com/ClickHouse/ClickHouse/blob/eb33caaa13355761e4ceaba4a41b8801161ce327/src/Common/ErrorCodes.cpp#L55
+                // //https://github.com/ClickHouse/ClickHouse/blob/eb33caaa13355761e4ceaba4a41b8801161ce327/src/Common/ErrorCodes.cpp#L68C7-L68C9
+                if (
+                  info.error.response.body.exception.startsWith('Code: 47') ||
+                  info.error.response.body.exception.startsWith('Code: 62')
+                ) {
+                  return 0;
+                }
+              }
               span.setAttribute('retry.count', info.attemptCount);
 
               if (info.attemptCount >= 6) {
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
new file mode 100644
index 0000000000..96cfd56caa
--- /dev/null
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -0,0 +1,282 @@
+import { Injectable } from 'graphql-modules';
+import { z } from 'zod';
+import { batch } from '@hive/api/shared/helpers';
+import { Logger } from '../../shared/providers/logger';
+import { ClickHouse, sql } from './clickhouse-client';
+import { SqlValue } from './sql';
+
+@Injectable({
+  global: true,
+})
+export class Traces {
+  constructor(
+    private clickHouse: ClickHouse,
+    private logger: Logger,
+  ) {}
+
+  private _findTraceByTraceId = batch<string, Trace | null>(async (traceIds: Array<string>) => {
+    this.logger.debug('looking up traces by id (traceIds=%o)', traceIds);
+    const result = await this.clickHouse.query<unknown>({
+      query: sql`
+        SELECT
+          ${traceFields}
+        FROM
+          "otel_traces_normalized"
+        WHERE
+          "trace_id" IN (${sql.array(traceIds, 'String')})
+        LIMIT 1 BY "trace_id"
+      `,
+      timeout: 10_000,
+      queryId: 'Traces.findTraceByTraceId',
+    });
+
+    this.logger.debug('found %d traces', result.data.length);
+
+    const lookupMap = new Map</* traceId */ string, Trace>();
+    const traces = TraceListModel.parse(result.data);
+    for (const trace of traces) {
+      lookupMap.set(trace.traceId, trace);
+    }
+
+    return traceIds.map(traceId => Promise.resolve(lookupMap.get(traceId) ?? null));
+  });
+
+  /**
+   * Find a specific trace by it's id.
+   * Uses batching under the hood.
+   */
+  async findTraceById(targetId: string, traceId: string): Promise<Trace | null> {
+    this.logger.debug('find trace by id (targetId=%s, traceId=%s)', targetId, traceId);
+    const trace = await this._findTraceByTraceId(traceId);
+    if (!trace) {
+      this.logger.debug('could not find trace by id (targetId=%s, traceId=%s)', targetId, traceId);
+      return null;
+    }
+    if (trace.targetId !== targetId) {
+      this.logger.debug(
+        'resolved trace target id does not match (targetId=%s, traceId=%s)',
+        targetId,
+        traceId,
+      );
+      return null;
+    }
+
+    this.logger.debug('trace found (targetId=%s, traceId=%s)', targetId, traceId);
+
+    return trace;
+  }
+
+  async findSpansForTraceId(traceId: string): Promise<Array<Span>> {
+    this.logger.debug('find spans for trace (traceId=%s)', traceId);
+    const result = await this.clickHouse.query<unknown>({
+      query: sql`
+        SELECT
+          ${spanFields}
+        FROM
+          "otel_traces"
+        WHERE
+          "TraceId" = ${traceId}
+      `,
+      timeout: 10_000,
+      queryId: 'Traces.findSpansForTraceId',
+    });
+
+    console.log(result.data);
+
+    return SpanListModel.parse(result.data);
+  }
+
+  async findTracesForTargetId(
+    targetId: string,
+    first: number | null,
+    filter: {
+      id?: Array<string>;
+      success?: Array<boolean>;
+      operationName?: Array<string>;
+      operationType?: Array<string>;
+      subgraphs?: Array<string>;
+      httpStatusCode?: Array<string>;
+      httpMethod?: Array<string>;
+      httpHost?: Array<string>;
+      httpRoute?: Array<string>;
+      httpUrl?: Array<string>;
+    },
+  ) {
+    const clickhouse = this.clickHouse;
+    const limit = (first ?? 10) + 1;
+
+    const ANDs: SqlValue[] = [sql`target_id = ${targetId}`];
+
+    if (filter?.id?.length) {
+      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
+    }
+
+    if (filter?.success?.length) {
+      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
+      ANDs.push(
+        sql`${sql.join(
+          filter.success.map(ok =>
+            ok
+              ? // 2XX
+                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
+              : // non-2XXX
+                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
+          ),
+          ' OR ',
+        )}`,
+      );
+    }
+
+    if (filter?.operationName?.length) {
+      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
+    }
+
+    if (filter?.operationType?.length) {
+      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
+    }
+
+    if (filter?.subgraphs?.length) {
+      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
+    }
+
+    if (filter?.httpStatusCode?.length) {
+      ANDs.push(
+        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+      );
+    }
+
+    if (filter?.httpMethod?.length) {
+      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    }
+
+    if (filter?.httpHost?.length) {
+      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    }
+
+    if (filter?.httpRoute?.length) {
+      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
+    }
+
+    if (filter?.httpUrl?.length) {
+      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
+    }
+
+    const tracesQuery = await clickhouse.query<unknown>({
+      query: sql`
+        SELECT
+          ${traceFields}
+        FROM
+          "otel_traces_normalized"
+        WHERE ${sql.join(ANDs, ' AND ')}
+        ORDER BY
+          "timestamp" DESC
+          , "trace_id" DESC
+        LIMIT ${sql.raw(String(limit))}
+      `,
+      queryId: 'traces',
+      timeout: 10_000,
+    });
+
+    const traces = TraceListModel.parse(tracesQuery.data);
+    let hasNext = false;
+
+    if (traces.length == limit) {
+      hasNext = true;
+      (traces as any).pop();
+    }
+
+    return {
+      edges: traces.map(trace => {
+        return {
+          node: trace,
+          cursor: Buffer.from(`${trace.timestamp}|${trace.traceId}`).toString('base64'),
+        };
+      }),
+      pageInfo: {
+        hasNextPage: hasNext,
+        hasPreviousPage: false,
+        endCursor: traces.length
+          ? Buffer.from(
+              `${traces[traces.length - 1].timestamp}|${traces[traces.length - 1].traceId}`,
+            ).toString('base64')
+          : '',
+        startCursor: traces.length
+          ? Buffer.from(`${traces[0].timestamp}|${traces[0].traceId}`).toString('base64')
+          : '',
+      },
+    };
+  }
+}
+
+const traceFields = sql`
+  "target_id" AS "targetId"
+  , "trace_id" AS "traceId"
+  , "span_id" AS "spanId"
+  , replaceOne(concat(toDateTime64("timestamp", 9, 'UTC'), 'Z'), ' ', 'T') AS "timestamp"
+  , "http_status_code" AS "httpStatusCode"
+  , "http_method" AS "httpMethod"
+  , "http_host" AS "httpHost"
+  , "http_route" AS "httpRoute"
+  , "http_url" AS "httpUrl"
+  , "duration"
+  , "graphql_operation_name" AS "graphqlOperationName"
+  , upper("graphql_operation_type") AS "graphqlOperationType"
+  , "graphql_error_codes" AS "graphqlErrorCodes"
+  , "subgraph_names" AS "subgraphNames"
+`;
+
+const TraceModel = z.object({
+  traceId: z.string(),
+  targetId: z.string().uuid(),
+  spanId: z.string(),
+  timestamp: z.string(),
+  httpStatusCode: z.string(),
+  httpMethod: z.string(),
+  httpHost: z.string(),
+  httpRoute: z.string(),
+  httpUrl: z.string(),
+  duration: z.string().transform(value => parseFloat(value)),
+  graphqlOperationName: z
+    .string()
+    .nullable()
+    .transform(value => value || null),
+  graphqlOperationType: z.union([
+    z.literal('QUERY'),
+    z.literal('MUTATION'),
+    z.literal('SUBSCRIPTION'),
+  ]),
+  graphqlErrorCodes: z.array(z.string()).nullable(),
+  subgraphNames: z.array(z.string()),
+});
+
+export type Trace = z.TypeOf<typeof TraceModel>;
+
+const TraceListModel = z.array(TraceModel);
+
+const spanFields = sql`
+  "TraceId" AS "traceId"
+  , "SpanId" AS "spanId"
+  , "SpanName" AS "spanName"
+  , "ResourceAttributes" AS "resourceAttributes"
+  , "SpanAttributes" AS "spanAttributes"
+  , replaceOne(concat(toDateTime64("Timestamp", 9, 'UTC'), 'Z'), ' ', 'T') AS "startDate"
+  , replaceOne(concat(toDateTime64(addNanoseconds("Timestamp", "Duration"), 9, 'UTC'), 'Z'), ' ', 'T') AS "endDate"
+  , "Duration" AS "duration"
+  , "ParentSpanId" AS "parentSpanId"
+`;
+
+const SpanModel = z.object({
+  traceId: z.string(),
+  spanId: z.string(),
+  spanName: z.string(),
+  resourceAttributes: z.record(z.string(), z.unknown()),
+  spanAttributes: z.record(z.string(), z.unknown()),
+  startDate: z.string(),
+  endDate: z.string(),
+  duration: z.string().transform(value => parseFloat(value)),
+  parentSpanId: z.string().transform(value => value || null),
+});
+
+const SpanListModel = z.array(SpanModel);
+
+export type Span = z.TypeOf<typeof SpanModel>;
diff --git a/packages/services/api/src/modules/operations/resolvers/Span.ts b/packages/services/api/src/modules/operations/resolvers/Span.ts
new file mode 100644
index 0000000000..22286473a7
--- /dev/null
+++ b/packages/services/api/src/modules/operations/resolvers/Span.ts
@@ -0,0 +1,29 @@
+import { addMilliseconds } from 'date-fns';
+import type { SpanResolvers } from './../../../__generated__/types';
+
+/*
+ * Note: This object type is generated because "SpanMapper" is declared. This is to ensure runtime safety.
+ *
+ * When a mapper is used, it is possible to hit runtime errors in some scenarios:
+ * - given a field name, the schema type's field type does not match mapper's field type
+ * - or a schema type's field does not exist in the mapper's fields
+ *
+ * If you want to skip this file generation, remove the mapper or update the pattern in the `resolverGeneration.object` config.
+ */
+export const Span: SpanResolvers = {
+  id(span) {
+    return span.spanId;
+  },
+  name(span) {
+    return span.spanName;
+  },
+  parentId(span) {
+    return span.parentSpanId;
+  },
+  startTime(span) {
+    return span.startDate;
+  },
+  endTime(span) {
+    return span.endDate;
+  },
+};
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 9897c416c8..a0c27b5c56 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -3,6 +3,7 @@ import { parseDateRangeInput } from '../../../shared/helpers';
 import { ClickHouse, sql } from '../providers/clickhouse-client';
 import { OperationsManager } from '../providers/operations-manager';
 import { SqlValue } from '../providers/sql';
+import { Traces } from '../providers/traces';
 import type { TargetResolvers } from './../../../__generated__/types';
 
 export const Target: Pick<
@@ -13,6 +14,7 @@ export const Target: Pick<
   | 'requestsOverTime'
   | 'schemaCoordinateStats'
   | 'totalRequests'
+  | 'trace'
   | 'traces'
   | 'tracesFilterOptions'
 > = {
@@ -75,150 +77,7 @@ export const Target: Pick<
     };
   },
   traces: async (target, { first, filter }, { injector }) => {
-    const clickhouse = injector.get(ClickHouse);
-    const limit = (first ?? 10) + 1;
-
-    const ANDs: SqlValue[] = [sql`target_id = ${target.id}`];
-
-    if (filter?.id?.length) {
-      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
-    }
-
-    if (filter?.success?.length) {
-      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
-      ANDs.push(
-        sql`${sql.join(
-          filter.success.map(ok =>
-            ok
-              ? // 2XX
-                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
-              : // non-2XXX
-                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
-          ),
-          ' OR ',
-        )}`,
-      );
-    }
-
-    if (filter?.operationName?.length) {
-      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
-    }
-
-    if (filter?.operationType?.length) {
-      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
-    }
-
-    if (filter?.subgraphs?.length) {
-      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
-    }
-
-    if (filter?.httpStatusCode?.length) {
-      ANDs.push(
-        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
-      );
-    }
-
-    if (filter?.httpMethod?.length) {
-      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
-    }
-
-    if (filter?.httpHost?.length) {
-      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
-    }
-
-    if (filter?.httpRoute?.length) {
-      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
-    }
-
-    if (filter?.httpUrl?.length) {
-      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
-    }
-
-    const tracesQuery = await clickhouse.query<{
-      target_id: string;
-      trace_id: string;
-      span_id: string;
-      timestamp: string;
-      operation_name: string;
-      operation_type: string;
-      duration: number;
-      subgraph_names: string[];
-      http_status_code: string;
-      http_method: string;
-      http_host: string;
-      http_route: string;
-      http_url: string;
-    }>({
-      query: sql`
-        SELECT
-          "target_id"
-          , "trace_id"
-          , "span_id"
-          , "timestamp"
-          , "http_status_code"
-          , "http_method"
-          , "http_host"
-          , "http_route"
-          , "http_url"
-          , "duration"
-          , "graphql_operation_name" AS "operation_name"
-          , upper("graphql_operation_type") AS "operation_type"
-          , "subgraph_names"
-        FROM
-          "otel_traces_normalized"
-        WHERE ${sql.join(ANDs, ' AND ')}
-        ORDER BY
-          "timestamp" DESC
-          , "trace_id" DESC
-        LIMIT ${sql.raw(String(limit))}
-      `,
-      queryId: 'traces',
-      timeout: 10_000,
-    });
-
-    const traces = tracesQuery.data;
-    let hasNext = false;
-
-    if (traces.length == limit) {
-      hasNext = true;
-      (traces as any).pop();
-    }
-
-    return {
-      edges: traces.map(trace => {
-        return {
-          node: {
-            id: trace.trace_id,
-            timestamp: new Date(trace.timestamp),
-            operationName: trace.operation_name,
-            operationType: trace.operation_type as any,
-            duration: trace.duration,
-            subgraphs: trace.subgraph_names,
-            success: trace.http_status_code === '200',
-            clientName: null,
-            clientVersion: null,
-            httpStatusCode: Number(trace.http_status_code),
-            httpMethod: trace.http_method,
-            httpHost: trace.http_host,
-            httpRoute: trace.http_route,
-            httpUrl: trace.http_url,
-          },
-          cursor: Buffer.from(`${trace.timestamp}|${trace.trace_id}`).toString('base64'),
-        };
-      }),
-      pageInfo: {
-        hasNextPage: hasNext,
-        hasPreviousPage: false,
-        endCursor: traces.length
-          ? Buffer.from(
-              `${traces[traces.length - 1].timestamp}|${traces[traces.length - 1].trace_id}`,
-            ).toString('base64')
-          : '',
-        startCursor: traces.length
-          ? Buffer.from(`${traces[0].timestamp}|${traces[0].trace_id}`).toString('base64')
-          : '',
-      },
-    };
+    return injector.get(Traces).findTracesForTargetId(target.id, first ?? null, filter);
   },
   tracesFilterOptions: async (_parent, { filter }, { injector }) => {
     const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
@@ -339,4 +198,7 @@ export const Target: Pick<
       loader,
     };
   },
+  trace(target, args, { injector }) {
+    return injector.get(Traces).findTraceById(target.id, args.traceId);
+  },
 };
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
new file mode 100644
index 0000000000..03c9da5cb9
--- /dev/null
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -0,0 +1,42 @@
+import { Traces } from '../providers/traces';
+import type { TraceResolvers } from './../../../__generated__/types';
+
+/*
+ * Note: This object type is generated because "TraceMapper" is declared. This is to ensure runtime safety.
+ *
+ * When a mapper is used, it is possible to hit runtime errors in some scenarios:
+ * - given a field name, the schema type's field type does not match mapper's field type
+ * - or a schema type's field does not exist in the mapper's fields
+ *
+ * If you want to skip this file generation, remove the mapper or update the pattern in the `resolverGeneration.object` config.
+ */
+export const Trace: TraceResolvers = {
+  /* Implement Trace resolver logic here */
+  clientName(_trace) {
+    return 'noop';
+  },
+  clientVersion(_trace) {
+    return 'noop';
+  },
+  httpStatusCode(trace) {
+    return Number(trace.httpStatusCode);
+  },
+  id(trace) {
+    return trace.traceId;
+  },
+  operationName(trace) {
+    return trace.graphqlOperationName;
+  },
+  operationType(trace) {
+    return trace.graphqlOperationType;
+  },
+  spans(trace, _arg, { injector }) {
+    return injector.get(Traces).findSpansForTraceId(trace.traceId);
+  },
+  subgraphs(trace) {
+    return trace.subgraphNames;
+  },
+  success(trace) {
+    return trace.httpStatusCode === '200';
+  },
+};
diff --git a/packages/services/api/src/modules/shared/module.graphql.ts b/packages/services/api/src/modules/shared/module.graphql.ts
index eab3c5cf5d..401d4ea484 100644
--- a/packages/services/api/src/modules/shared/module.graphql.ts
+++ b/packages/services/api/src/modules/shared/module.graphql.ts
@@ -14,6 +14,14 @@ export default gql`
   scalar DateTime
     @tag(name: "public")
     @specifiedBy(url: "https://the-guild.dev/graphql/scalars/docs/scalars/date-time")
+
+  """
+  DateTime with nano second precission.
+  """
+  scalar DateTime64
+
+  scalar JSONObject
+
   scalar Date
   scalar JSON
   scalar JSONSchemaObject
diff --git a/packages/services/api/src/modules/shared/resolvers/DateTime64.ts b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
new file mode 100644
index 0000000000..48cde0ca0f
--- /dev/null
+++ b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
@@ -0,0 +1,148 @@
+/**
+ * @source https://github.com/graphql-hive/graphql-scalars/blob/8f02889d6fb9d391f86fa761ced271c9bb8d5d6f/src/scalars/iso-date/DateTime.ts#L1
+ *
+ * Most of this code originates from there. The only modifications is to not instantiate a JS DateTime but keep the value as a string in order to retain
+ * nano second precission.
+ */
+import { GraphQLScalarType, Kind } from 'graphql';
+import { createGraphQLError } from 'graphql-yoga';
+
+const leapYear = (year: number): boolean => {
+  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+};
+
+const validateDate = (datestring: string): boolean => {
+  const RFC_3339_REGEX = /^(\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01]))$/;
+
+  if (!RFC_3339_REGEX.test(datestring)) {
+    return false;
+  }
+
+  // Verify the correct number of days for
+  // the month contained in the date-string.
+  const year = Number(datestring.substr(0, 4));
+  const month = Number(datestring.substr(5, 2));
+  const day = Number(datestring.substr(8, 2));
+
+  switch (month) {
+    case 2: // February
+      if (leapYear(year) && day > 29) {
+        return false;
+      } else if (!leapYear(year) && day > 28) {
+        return false;
+      }
+      return true;
+    case 4: // April
+    case 6: // June
+    case 9: // September
+    case 11: // November
+      if (day > 30) {
+        return false;
+      }
+      break;
+  }
+
+  return true;
+};
+
+const validateDateTime = (dateTimeString: string): boolean => {
+  dateTimeString = dateTimeString?.toUpperCase();
+  const RFC_3339_REGEX =
+    /^(\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])T([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9]|60))(\.\d{1,})?(([Z])|([+|-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
+
+  // Validate the structure of the date-string
+  if (!RFC_3339_REGEX.test(dateTimeString)) {
+    return false;
+  }
+  // Check if it is a correct date using the javascript Date parse() method.
+  const time = Date.parse(dateTimeString);
+  if (time !== time) {
+    // eslint-disable-line
+    return false;
+  }
+  // Split the date-time-string up into the string-date and time-string part.
+  // and check whether these parts are RFC 3339 compliant.
+  const index = dateTimeString.indexOf('T');
+  const dateString = dateTimeString.substr(0, index);
+  const timeString = dateTimeString.substr(index + 1);
+  return validateDate(dateString) && validateTime(timeString);
+};
+
+const validateTime = (time: string): boolean => {
+  time = time?.toUpperCase();
+  const TIME_REGEX =
+    /^([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])(\.\d{1,})?(([Z])|([+|-]([01][0-9]|2[0-3]):[0-5][0-9]))$/;
+  return TIME_REGEX.test(time);
+};
+
+const validateJSDate = (date: Date): boolean => {
+  const time = date.getTime();
+  return time === time; // eslint-disable-line
+};
+
+const parseDateTime = (dateTime: string) => dateTime;
+
+export const DateTime64 = new GraphQLScalarType({
+  name: 'DateTime64',
+  description: 'TODO',
+  serialize(value) {
+    if (value instanceof Date) {
+      if (validateJSDate(value)) {
+        return value.toISOString();
+      }
+      throw createGraphQLError('DateTime cannot represent an invalid Date instance');
+    } else if (typeof value === 'string') {
+      if (validateDateTime(value)) {
+        return parseDateTime(value);
+      }
+      throw createGraphQLError(`DateTime cannot represent an invalid date-time-string ${value}.`);
+    } else if (typeof value === 'number') {
+      try {
+        return new Date(value).toISOString();
+      } catch {
+        throw createGraphQLError('DateTime cannot represent an invalid Unix timestamp ' + value);
+      }
+    } else {
+      throw createGraphQLError(
+        'DateTime cannot be serialized from a non string, ' +
+          'non numeric or non Date type ' +
+          JSON.stringify(value),
+      );
+    }
+  },
+  parseValue(value) {
+    if (value instanceof Date) {
+      if (validateJSDate(value)) {
+        return value.toISOString();
+      }
+      throw createGraphQLError('DateTime cannot represent an invalid Date instance');
+    }
+    if (typeof value === 'string') {
+      if (validateDateTime(value)) {
+        return parseDateTime(value);
+      }
+      throw createGraphQLError(`DateTime cannot represent an invalid date-time-string ${value}.`);
+    }
+    throw createGraphQLError(
+      `DateTime cannot represent non string or Date type ${JSON.stringify(value)}`,
+    );
+  },
+  parseLiteral(ast) {
+    if (ast.kind !== Kind.STRING) {
+      throw createGraphQLError(
+        `DateTime cannot represent non string or Date type ${'value' in ast && ast.value}`,
+        {
+          nodes: ast,
+        },
+      );
+    }
+    const { value } = ast;
+    if (validateDateTime(value)) {
+      return parseDateTime(value);
+    }
+    throw createGraphQLError(
+      `DateTime cannot represent an invalid date-time-string ${String(value)}.`,
+      { nodes: ast },
+    );
+  },
+});
diff --git a/packages/services/api/src/modules/shared/resolvers/JSONObject.ts b/packages/services/api/src/modules/shared/resolvers/JSONObject.ts
new file mode 100644
index 0000000000..2c499a6042
--- /dev/null
+++ b/packages/services/api/src/modules/shared/resolvers/JSONObject.ts
@@ -0,0 +1,7 @@
+import { JSONObjectResolver } from 'graphql-scalars';
+
+// `scalar JSON` in `module.graphql.ts` does not have a description
+// and it messes up the static analysis
+JSONObjectResolver.description = undefined;
+
+export const JSONObject = JSONObjectResolver;
diff --git a/packages/web/app/src/components/ui/button.tsx b/packages/web/app/src/components/ui/button.tsx
index 0849ee1430..62af60dcfc 100644
--- a/packages/web/app/src/components/ui/button.tsx
+++ b/packages/web/app/src/components/ui/button.tsx
@@ -23,6 +23,7 @@ const buttonVariants = cva(
         lg: 'h-11 px-8 rounded-md',
         icon: 'size-10',
         'icon-sm': 'size-7',
+        'icon-xs': 'size-4',
       },
     },
     defaultVariants: {
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index e979bab3d5..35ec282136 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1,471 +1,28 @@
-import { Fragment, ReactNode, useCallback, useRef, useState } from 'react';
-import { AlertTriangle } from 'lucide-react';
+import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import { AlertTriangle, ChevronDown, ChevronUp, Clock, CopyIcon } from 'lucide-react';
 import AutoSizer from 'react-virtualized-auto-sizer';
+import { useQuery } from 'urql';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 import { Meta } from '@/components/ui/meta';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { FragmentType, graphql, useFragment } from '@/gql';
+import { useClipboard } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
+import { useNavigate } from '@tanstack/react-router';
 import { useWidthSync, WidthSyncProvider } from './target-traces-width';
 
-const rootSpan: SpanProps = {
-  id: 'root',
-  title: 'FetchProducts',
-  serviceName: 'gateway',
-  duration: 8.12,
-  startedAt: 0,
-  children: [
-    {
-      id: '1ns581b',
-      title: 'plan',
-      serviceName: 'gateway',
-      duration: 2.3,
-      startedAt: 0.2,
-      children: [],
-    },
-    {
-      id: '213hbsdgs',
-      title: 'subgraph',
-      serviceName: 'products',
-      duration: 4.06,
-      startedAt: 2.3,
-      children: [
-        {
-          id: '138sndhs',
-          title: 'parse',
-          duration: 0.1,
-          startedAt: 2.4,
-          children: [],
-        },
-        {
-          id: '1n1bsxs1',
-          title: 'validate',
-          duration: 0.9,
-          startedAt: 2.5,
-          children: [],
-        },
-      ],
-    },
-    {
-      id: '1n23sxs1',
-      title: 'subgraph',
-      serviceName: 'prices',
-      duration: 2.03,
-      startedAt: 4.06,
-      children: [
-        {
-          id: '19nxb23b',
-          title: 'parse',
-          duration: 0.1,
-          startedAt: 4.1,
-          children: [],
-        },
-        {
-          id: '284bsdb1',
-          title: 'validate',
-          duration: 1.2,
-          startedAt: 4.2,
-          children: [
-            {
-              id: '284bsdb1',
-              title: 'async validation',
-              duration: 0.2,
-              startedAt: 5.4,
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-type Trace = {
-  id: string;
-  timestamp: number;
-  duration: number;
-  status: 'ok' | 'error';
-  kind: 'query' | 'mutation' | 'subscription';
-  operationName: string;
-  operationHash: string;
-  httpStatus: number;
-  httpMethod: 'GET' | 'POST';
-  httpHost: string;
-  httpRoute: string;
-  httpUrl: string;
-  subgraphNames: string[];
-};
-
-const now = new Date();
-function generateTraceId() {
-  return [...Array(32)].map(() => Math.floor(Math.random() * 16).toString(16)).join('');
-}
-const data: Trace[] = [
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime(),
-    status: 'ok',
-    duration: 6019,
-    kind: 'query',
-    operationName: 'FetchProducts',
-    operationHash: '3h1s',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['link', 'products', 'prices'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 120000,
-    status: 'ok',
-    duration: 6019,
-    kind: 'query',
-    operationName: 'FetchProducts',
-    operationHash: '3h1s',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['link', 'products', 'prices'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 240000,
-    status: 'error',
-    duration: 10045,
-    kind: 'mutation',
-    operationName: 'UpdateProduct',
-    operationHash: '8f2b',
-    httpStatus: 500,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['products'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 360000,
-    status: 'ok',
-    duration: 3045,
-    kind: 'query',
-    operationName: 'GetUser',
-    operationHash: 'a7g4',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 480000,
-    status: 'ok',
-    duration: 4521,
-    kind: 'query',
-    operationName: 'ListOrders',
-    operationHash: 'c9h2',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders', 'users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 600000,
-    status: 'error',
-    duration: 7890,
-    kind: 'mutation',
-    operationName: 'CancelOrder',
-    operationHash: 'd1k8',
-    httpStatus: 400,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 720000,
-    status: 'ok',
-    duration: 2156,
-    kind: 'subscription',
-    operationName: 'OrderStatusUpdated',
-    operationHash: 'e4m7',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['orders'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 840000,
-    status: 'ok',
-    duration: 5092,
-    kind: 'query',
-    operationName: 'FetchCart',
-    operationHash: 'f2p9',
-    httpStatus: 200,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['cart', 'products'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 960000,
-    status: 'ok',
-    duration: 6820,
-    kind: 'mutation',
-    operationName: 'AddToCart',
-    operationHash: 'g7r5',
-    httpStatus: 201,
-    httpMethod: 'POST',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['cart'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-  {
-    id: generateTraceId(),
-    timestamp: now.getTime() + 1080000,
-    status: 'error',
-    duration: 3502,
-    kind: 'query',
-    operationName: 'FetchUserProfile',
-    operationHash: 'h3q6',
-    httpStatus: 401,
-    httpMethod: 'GET',
-    httpHost: 'localhost:3000',
-    httpRoute: '/graphql',
-    httpUrl: 'http://localhost:3000/',
-    subgraphNames: ['users'],
-  },
-];
-
 const fetchProductsQueryString = `
   query FetchProduct {
     products {
@@ -482,12 +39,17 @@ interface TraceAttribute {
   category?: string;
 }
 
-function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
+function TraceView(props: {
+  rootSpan: SpanFragmentWithChildren;
+  serviceNames: string[];
+  totalTraceDuration: bigint;
+}) {
   const [width] = useWidthSync();
   const [highlightedServiceName, setHighlightedServiceName] = useState<string | null>(null);
-  const rootSpan = props.rootSpan;
   const serviceNames = props.serviceNames;
 
+  const timestamps = splitNanosecondsToMsIntervals(props.totalTraceDuration);
+
   return (
     <div className="flex h-full flex-col">
       <div className="sticky top-0 z-10 border-b border-gray-800">
@@ -500,15 +62,25 @@ function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
           </div>
           <div className="h-12 grow pr-8">
             <div className="relative h-full w-full">
-              <div className="absolute left-0 top-6 -translate-x-1/2 text-center">0ms</div>
+              <div className="absolute left-0 top-6 -translate-x-1/2 text-center">
+                {formatMsTimestamp(timestamps[0])}
+              </div>
               <div className="absolute bottom-0 left-0 h-2 w-px bg-[#27272a]" />
-              <div className="absolute left-[25%] top-6 -translate-x-1/2 text-center">2.03ms</div>
+              <div className="absolute left-[25%] top-6 -translate-x-1/2 text-center">
+                {formatMsTimestamp(timestamps[1])}
+              </div>
               <div className="absolute bottom-0 left-[25%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute left-[50%] top-6 -translate-x-1/2 text-center">4.06ms</div>
+              <div className="absolute left-[50%] top-6 -translate-x-1/2 text-center">
+                {formatMsTimestamp(timestamps[2])}
+              </div>
               <div className="absolute bottom-0 left-[50%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute left-[75%] top-6 -translate-x-1/2 text-center">6.09ms</div>
+              <div className="absolute left-[75%] top-6 -translate-x-1/2 text-center">
+                {formatMsTimestamp(timestamps[3])}
+              </div>
               <div className="absolute bottom-0 left-[75%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute right-0 top-6 translate-x-1/2 text-center">8.12ms</div>
+              <div className="absolute right-0 top-6 translate-x-1/2 text-center">
+                {formatMsTimestamp(timestamps[4])}
+              </div>
               <div className="absolute bottom-0 right-0 h-2 w-px -translate-x-1/2 bg-[#27272a]" />
             </div>
           </div>
@@ -518,14 +90,15 @@ function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
         <div>
           <TraceTree
             leftPanelWidth={width}
-            rootSpan={rootSpan}
+            rootSpan={props.rootSpan}
             highlightedServiceName={highlightedServiceName}
+            serviceNames={serviceNames}
           />
         </div>
       </ScrollArea>
       <div className="sticky bottom-0 z-10 px-2 py-4">
         <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
-          {serviceNames.map((serviceName, index) => (
+          {serviceNames.map(serviceName => (
             <div
               key={serviceName}
               className="flex cursor-pointer items-center gap-2 hover:text-white"
@@ -535,7 +108,7 @@ function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
               <div
                 className="size-2"
                 style={{
-                  backgroundColor: colors[index % colors.length],
+                  backgroundColor: stringToHSL(serviceName),
                 }}
               />
               <div>{serviceName}</div>
@@ -748,26 +321,29 @@ function TraceResize(props: { minWidth: number; maxWidth: number }) {
 
 function TraceTree(props: {
   highlightedServiceName: string | null;
-  rootSpan: SpanProps;
+  rootSpan: SpanFragmentWithChildren;
   leftPanelWidth: number;
+  serviceNames: Array<string>;
 }) {
+  const rootSpan = useFragment(SpanFragment, props.rootSpan.span);
   const [width] = useWidthSync();
   const minWidth = 175;
   const maxWidth = 450;
-  const serviceNames = listServiceNames(props.rootSpan);
   const serviceNameToColorMap = Object.fromEntries(
-    serviceNames.map((name, index) => [name, colors[index % colors.length]]),
+    props.serviceNames.map((name, index) => [name, colors[index % colors.length]]),
   );
   const containerRef = useRef<HTMLDivElement>(null);
 
+  const durationNs = differenceInNanoseconds(rootSpan.endTime, rootSpan.startTime);
+
   return (
     <div className="relative" ref={containerRef}>
       <TraceResize minWidth={minWidth} maxWidth={maxWidth} />
       <Node
-        key={props.rootSpan.id}
+        key={rootSpan.id}
         level={0}
         highlightedServiceName={props.highlightedServiceName}
-        totalDuration={rootSpan.duration}
+        totalDurationNs={durationNs}
         leftPanelWidth={width}
         span={props.rootSpan}
         parentSpan={null}
@@ -775,6 +351,8 @@ function TraceTree(props: {
         parentColor={null}
         color={colors[0]}
         serviceNameToColorMap={serviceNameToColorMap}
+        serviceName={null}
+        isLastChild={false}
       />
     </div>
   );
@@ -792,36 +370,22 @@ type SpanProps = {
 type NodeProps = {
   highlightedServiceName: string | null;
   level: number;
-  totalDuration: number;
+  totalDurationNs: bigint;
   leftPanelWidth: number;
-  span: SpanProps;
-  parentSpan: SpanProps | null;
+  span: SpanFragmentWithChildren;
+  parentSpan: SpanFragmentWithChildren | null;
   groupLines: boolean[];
   color: string;
   parentColor: string | null;
   serviceNameToColorMap: Record<string, string>;
+  serviceName: string | null;
+  isLastChild: boolean;
 };
 
-function countChildren(spans: SpanProps[]): number {
+function countChildren(spans: SpanFragmentWithChildren[]): number {
   return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
 }
 
-function _listServiceNames(span: SpanProps, serviceNames: string[]) {
-  if (span.serviceName && !serviceNames.includes(span.serviceName)) {
-    serviceNames.push(span.serviceName);
-  }
-
-  for (const child of span.children) {
-    _listServiceNames(child, serviceNames);
-  }
-}
-
-function listServiceNames(span: SpanProps): string[] {
-  const serviceNames: string[] = [];
-  _listServiceNames(span, serviceNames);
-  return serviceNames;
-}
-
 const colors = [
   '#2662d8',
   '#2eb88a',
@@ -834,36 +398,53 @@ const colors = [
   '#F27059',
   '#2D9D78',
 ];
+
 function Node(props: NodeProps) {
+  const span = useFragment(SpanFragment, props.span.span);
+
   const [collapsed, setCollapsed] = useState(false);
   const leftPositionPercentage = roundFloatToTwoDecimals(
-    (props.span.startedAt / props.totalDuration) * 100,
+    (nanosecondsToMilliseconds(props.span.startNs) /
+      nanosecondsToMilliseconds(props.totalDurationNs)) *
+      100,
   );
+
   const widthPercentage = roundFloatToTwoDecimals(
-    (props.span.duration / props.totalDuration) * 100,
+    (nanosecondsToMilliseconds(props.span.durationNs) /
+      nanosecondsToMilliseconds(props.totalDurationNs)) *
+      100,
   );
 
   const isNearRightEdge = leftPositionPercentage + widthPercentage > 85;
   const isDimmed =
     typeof props.highlightedServiceName === 'string' &&
-    props.highlightedServiceName !== props.span.serviceName;
-
-  const isLastChild =
-    props.parentSpan?.children[props.parentSpan.children.length - 1].id === props.span.id;
+    props.highlightedServiceName !== span.spanAttributes['gateway.upstream.subgraph.name'];
 
   const childrenCount = collapsed
     ? countChildren(props.span.children) + 1
     : props.span.children.length;
+
   const canBeCollapsed = props.span.children.length > 0;
+  const parentColor = props.parentColor ?? props.color;
 
-  const color = props.color;
-  const parentColor = props.parentColor ?? color;
+  const percentageOfTotal = (
+    (nanosecondsToMilliseconds(props.span.durationNs) /
+      nanosecondsToMilliseconds(props.totalDurationNs)) *
+    100
+  ).toFixed(2);
 
-  const percentageOfTotal = ((props.span.duration / props.totalDuration) * 100).toFixed(2);
   const percentageOfParent = props.parentSpan
-    ? ((props.span.duration / props.parentSpan.duration) * 100).toFixed(2)
+    ? (
+        (nanosecondsToMilliseconds(props.span.durationNs) /
+          nanosecondsToMilliseconds(props.parentSpan.durationNs)) *
+        100
+      ).toFixed(2)
     : null;
 
+  const navigate = useNavigate({
+    from: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
+  });
+
   return (
     <>
       <div className="cursor-pointer pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
@@ -874,9 +455,9 @@ function Node(props: NodeProps) {
           >
             <div className="flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500">
               <TreeIcon
-                key={`tree-icon-${props.span.id}`}
+                key={`tree-icon-${span.id}`}
                 isLeaf={props.span.children.length === 0}
-                isLastChild={isLastChild}
+                isLastChild={props.isLastChild}
                 childrenCount={childrenCount}
                 hasParent={!!props.parentSpan}
                 level={props.level}
@@ -888,16 +469,16 @@ function Node(props: NodeProps) {
             <div
               className={cn('whitespace-nowrap text-xs', isDimmed ? 'text-gray-500' : 'text-white')}
             >
-              {props.span.title}
+              {span.name}
             </div>
-            {props.span.serviceName ? (
+            {span.spanAttributes['gateway.upstream.subgraph.name'] ? (
               <div
                 className={cn(
                   'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs',
                   isDimmed ? 'text-gray-600' : 'text-gray-500',
                 )}
               >
-                {props.span.serviceName}
+                {span.spanAttributes['gateway.upstream.subgraph.name']}
               </div>
             ) : null}
           </div>
@@ -914,7 +495,13 @@ function Node(props: NodeProps) {
                   style={{
                     left: `min(${leftPositionPercentage}%, 100% - 1px)`,
                     width: `${widthPercentage}%`,
-                    backgroundColor: color,
+                    backgroundColor: props.color,
+                  }}
+                  onClick={() => {
+                    navigate({
+                      to: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
+                      search: { activeSpanId: span.id },
+                    });
                   }}
                 >
                   <div
@@ -924,7 +511,7 @@ function Node(props: NodeProps) {
                       ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
                     }}
                   >
-                    {props.span.duration}ms
+                    {formatNanoseconds(props.span.durationNs)}
                   </div>
                 </div>
               </TooltipTrigger>
@@ -937,11 +524,13 @@ function Node(props: NodeProps) {
                   <div className="grid grid-cols-2 gap-y-2">
                     <div className="text-gray-400">Duration</div>
                     <div className="text-right font-mono">
-                      <span>{props.span.duration}ms</span>
+                      <span>{formatNanoseconds(props.span.durationNs)}</span>
                     </div>
 
                     <div className="text-gray-400">Started At</div>
-                    <div className="text-right font-mono">{props.span.startedAt}ms</div>
+                    <div className="text-right font-mono">
+                      {formatNanoseconds(props.span.startNs)}
+                    </div>
 
                     <div className="text-gray-400">% of Total</div>
                     <div className="text-right font-mono">{percentageOfTotal}%</div>
@@ -989,31 +578,39 @@ function Node(props: NodeProps) {
       {collapsed
         ? null
         : props.span.children.length
-          ? props.span.children.map(childSpan => {
-              const span = {
-                ...childSpan,
-                // if the child span doesn't have a serviceName, use the parent's serviceName
-                serviceName: childSpan.serviceName ?? props.span.serviceName,
-              };
+          ? props.span.children.map((childSpan, i, arr) => {
+              const uchildSpan = useFragment(SpanFragment, childSpan.span);
+
+              const serviceName: string | null =
+                uchildSpan.spanAttributes['gateway.upstream.subgraph.name'] ??
+                props.serviceName ??
+                null;
 
+              const isLastChild = i === arr.length - 1;
               return (
                 <Node
                   key={span.id}
+                  span={childSpan}
                   highlightedServiceName={props.highlightedServiceName}
                   leftPanelWidth={props.leftPanelWidth}
-                  totalDuration={props.totalDuration}
-                  span={span}
+                  totalDurationNs={props.totalDurationNs}
                   level={props.level + 1}
                   parentSpan={props.span}
                   groupLines={
-                    isLastChild
+                    props.isLastChild
                       ? // remove the last line if it's the last span from the group
                         props.groupLines.slice(0, -1).concat(false, true)
                       : props.groupLines.concat(true)
                   }
-                  parentColor={color}
-                  color={span.serviceName ? props.serviceNameToColorMap[span.serviceName] : color}
+                  parentColor={props.color}
+                  color={
+                    serviceName
+                      ? stringToHSL(props.serviceNameToColorMap[serviceName])
+                      : props.color
+                  }
                   serviceNameToColorMap={props.serviceNameToColorMap}
+                  serviceName={serviceName}
+                  isLastChild={isLastChild}
                 />
               );
             })
@@ -1022,74 +619,64 @@ function Node(props: NodeProps) {
   );
 }
 
-function GridTable(props: {
-  rows: Array<{
-    key: string;
-    value: ReactNode;
-  }>;
-}) {
-  return (
-    <div className="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
-      {props.rows.map(row => (
-        <Fragment key={row.key}>
-          <div className="font-sans text-gray-400">{row.key}</div>
-          <div className="text-right font-mono">{row.value}</div>
-        </Fragment>
-      ))}
-    </div>
-  );
-}
+// function GridTable(props: {
+//   rows: Array<{
+//     key: string;
+//     value: ReactNode;
+//   }>;
+// }) {
+//   return (
+//     <div className="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
+//       {props.rows.map(row => (
+//         <Fragment key={row.key}>
+//           <div className="font-sans text-gray-400">{row.key}</div>
+//           <div className="text-right font-mono">{row.value}</div>
+//         </Fragment>
+//       ))}
+//     </div>
+//   );
+// }
 
-function roundFloatToTwoDecimals(num: number) {
-  return Math.round(num * 100) / 100;
-}
+const TraceSheet_TraceFragment = graphql(`
+  fragment TraceSheet_TraceFragment on Trace {
+    id
+    subgraphs
+    spans {
+      id
+      ...SpanFragment
+      ...SpanSheet_SpanFragment
+    }
+  }
+`);
+
+type TraceSheetProps = {
+  trace: FragmentType<typeof TraceSheet_TraceFragment>;
+  activeSpanId: string | null;
+};
 
-function TraceSheet({ trace }: { trace: Trace | null }) {
+function TraceSheet(props: TraceSheetProps) {
   const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
+  const trace = useFragment(TraceSheet_TraceFragment, props.trace);
 
-  if (!trace) {
-    return null;
-  }
+  const rootSpan = useMemo(() => createSpanTreeStructure(trace.spans), [trace.spans]);
+  const rootSpanUnmasked = useFragment(SpanFragment, rootSpan.span);
 
-  const attributes: Array<TraceAttribute> = [
-    {
-      name: 'graphql.operationKind',
-      value: trace.kind,
-      category: 'GraphQL',
-    },
-    {
-      name: 'graphql.subgraphs',
-      value: trace.subgraphNames.join(', '),
-      category: 'GraphQL',
-    },
-    {
-      name: 'http.method',
-      value: trace.httpMethod,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.host',
-      value: trace.httpHost,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.route',
-      value: trace.httpRoute,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.url',
-      value: trace.httpUrl,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.status',
-      value: trace.httpStatus,
-      category: 'HTTP',
-    },
-  ];
+  const spanAttributes: Array<TraceAttribute> = Array.from(
+    Object.entries(rootSpanUnmasked.spanAttributes),
+  ).map(([name, value]) => ({
+    name,
+    value: String(value),
+    category: name.split('.')[0] ?? 'unknown',
+  }));
+
+  const totalTraceDuration = differenceInNanoseconds(
+    rootSpanUnmasked.endTime,
+    rootSpanUnmasked.startTime,
+  );
 
-  const serviceNames = listServiceNames(rootSpan);
+  const navigate = useNavigate({
+    from: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
+  });
 
   return (
     <div className="h-full">
@@ -1097,7 +684,11 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
         <ResizablePanelGroup direction="vertical">
           <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
             <WidthSyncProvider defaultWidth={251}>
-              <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
+              <TraceView
+                rootSpan={rootSpan}
+                serviceNames={trace.subgraphs}
+                totalTraceDuration={totalTraceDuration}
+              />
             </WidthSyncProvider>
           </ResizablePanel>
           <ResizableHandle withHandle />
@@ -1151,9 +742,9 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
                 <div className="h-full">
                   {activeView === 'attributes' ? (
                     <div>
-                      {attributes.length > 0 ? (
+                      {spanAttributes.length > 0 ? (
                         <div>
-                          {attributes.map((attr, index) => (
+                          {spanAttributes.map((attr, index) => (
                             <div
                               key={index}
                               className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
@@ -1237,21 +828,53 @@ function TraceSheet({ trace }: { trace: Trace | null }) {
           </ResizablePanel>
         </ResizablePanelGroup>
       </TooltipProvider>
+      {props.activeSpanId && (
+        <SpanSheet
+          span={trace.spans.find(trace => trace.id === props.activeSpanId) ?? null}
+          onClose={() =>
+            navigate({
+              to: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
+              search: {},
+            })
+          }
+        />
+      )}
     </div>
   );
 }
 
-function TargetInsightsNewPageContent() {
-  const traceInSheet = data[0];
+function TargetInsightsNewPageContent(props: {
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
+  activeSpanId: string | null;
+}) {
+  const [result] = useQuery({
+    query: TargetTraceQuery,
+    variables: {
+      targetSelector: {
+        organizationSlug: props.organizationSlug,
+        projectSlug: props.projectSlug,
+        targetSlug: props.targetSlug,
+      },
+      traceId: props.traceId,
+    },
+  });
 
-  return <TraceSheet trace={traceInSheet} />;
+  if (!result.data?.target?.trace) {
+    return null;
+  }
+
+  return <TraceSheet trace={result.data.target.trace} activeSpanId={props.activeSpanId} />;
 }
 
 export function TargetTracePage(props: {
-  traceId: string;
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
+  traceId: string;
+  activeSpanId: string | null;
 }) {
   return (
     <>
@@ -1267,7 +890,7 @@ export function TargetTracePage(props: {
           <AutoSizer disableWidth>
             {size => (
               <div className="w-full" style={{ height: size.height }}>
-                <TargetInsightsNewPageContent />
+                <TargetInsightsNewPageContent {...props} />
               </div>
             )}
           </AutoSizer>
@@ -1276,3 +899,409 @@ export function TargetTracePage(props: {
     </>
   );
 }
+
+const TargetTraceQuery = graphql(/* GraphQL */ `
+  query TargetTraceQuery($targetSelector: TargetSelectorInput!, $traceId: ID!) {
+    target(reference: { bySelector: $targetSelector }) {
+      id
+      trace(traceId: $traceId) {
+        ...TraceSheet_TraceFragment
+        id
+        spans {
+          id
+          name
+          parentId
+          ...SpanFragment
+        }
+      }
+    }
+  }
+`);
+
+const SpanFragment = graphql(/* GraphQL */ `
+  fragment SpanFragment on Span {
+    id
+    name
+    spanAttributes
+    parentId
+    startTime
+    endTime
+  }
+`);
+
+type SpanFragmentWithChildren = {
+  span: FragmentType<typeof SpanFragment>;
+  children: Array<SpanFragmentWithChildren>;
+  durationNs: bigint;
+  startNs: bigint;
+};
+
+function createSpanTreeStructure(
+  fragments: Array<FragmentType<typeof SpanFragment>>,
+): SpanFragmentWithChildren {
+  const itemsById = new Map</* id */ string, SpanFragmentWithChildren>();
+  let root: SpanFragmentWithChildren | null = null;
+  for (const fragment of fragments) {
+    const ufragment = useFragment(SpanFragment, fragment);
+
+    const fragmentWithChildren: SpanFragmentWithChildren = {
+      span: fragment,
+      children: [],
+      durationNs: differenceInNanoseconds(ufragment.endTime, ufragment.startTime),
+      startNs: 0n,
+    };
+
+    itemsById.set(ufragment.id, fragmentWithChildren);
+    if (ufragment.parentId == null) {
+      root = fragmentWithChildren;
+    }
+  }
+
+  if (!root) {
+    throw new Error('No root found.');
+  }
+
+  const uroot = useFragment(SpanFragment, root.span);
+  const startNS = parseRFC3339ToEpochNanos(uroot.startTime);
+
+  for (const item of itemsById.values()) {
+    const uitem = useFragment(SpanFragment, item.span);
+    console.log(uitem.parentId);
+    if (!uitem.parentId) {
+      continue;
+    }
+    itemsById.get(uitem.parentId)?.children.push(item);
+    item.startNs = parseRFC3339ToEpochNanos(uitem.startTime) - startNS;
+  }
+
+  for (const item of itemsById.values()) {
+    item.children.sort((a, b) => {
+      if (a.startNs < b.startNs) {
+        return -1;
+      }
+      if (a.startNs > b.startNs) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  return root;
+}
+
+function formatNanoseconds(nsBigInt: bigint) {
+  const TEN_THOUSAND_NS = 10000n;
+
+  if (nsBigInt < TEN_THOUSAND_NS) {
+    return `${nsBigInt}ns`;
+  }
+
+  const hundredthsOfMs = nsBigInt / TEN_THOUSAND_NS;
+  const msValue = Number(hundredthsOfMs) / 100.0;
+  return `${msValue.toFixed(2)}ms`;
+}
+
+function parseRFC3339ToEpochNanos(datetime: string) {
+  const match = datetime.match(
+    /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,9}))?Z$/,
+  );
+
+  if (!match) {
+    throw new Error('Invalid RFC 3339 datetime string.');
+  }
+
+  const [, year, month, day, hour, minute, second, fraction = '0'] = match;
+
+  // Pad fraction to nanoseconds (9 digits)
+  const nanoStr = (fraction + '000000000').slice(0, 9);
+  const nanoseconds = parseInt(nanoStr, 10);
+
+  // Use Date.UTC to get milliseconds (integer part of timestamp)
+  const milliseconds = Date.UTC(+year, +month - 1, +day, +hour, +minute, +second);
+
+  const totalNanoseconds = BigInt(milliseconds) * 1_000_000n + BigInt(nanoseconds);
+  return totalNanoseconds;
+}
+
+function differenceInNanoseconds(datetime1: string, datetime2: string) {
+  const nanos1 = parseRFC3339ToEpochNanos(datetime1);
+  const nanos2 = parseRFC3339ToEpochNanos(datetime2);
+
+  return nanos1 - nanos2; // returns a BigInt representing nanoseconds
+}
+
+function splitNanosecondsToMsIntervals(nanoseconds: bigint): number[] {
+  const intervals: number[] = [0];
+  const intervalNs = nanoseconds / 4n;
+
+  for (let i = 0; i < 4; i++) {
+    // Convert nanoseconds to milliseconds (with up to 6 decimal places)
+    const ms = ((i + 1) * Number(intervalNs)) / 1_000_000;
+    intervals.push(ms);
+  }
+
+  return intervals;
+}
+
+function formatMsTimestamp(timestamp: number) {
+  if (timestamp === 0) {
+    return '0ms';
+  }
+  return timestamp.toFixed(2) + 'ms';
+}
+
+function stringToHSL(str: string, saturation = 70, lightness = 40) {
+  // Simple hash function
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash; // Convert to 32bit integer
+  }
+
+  // Use hash to generate HSL values
+  const hue = Math.abs(hash) % 360;
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+
+function nanosecondsToMilliseconds(nsBigInt: bigint) {
+  const oneMillion = 1000000n;
+  const msBigInt = nsBigInt / oneMillion; // BigInt division, truncates remainder
+
+  return Number(msBigInt); // Convert BigInt to Number
+}
+
+function roundFloatToTwoDecimals(num: number) {
+  return Math.round(num * 100) / 100;
+}
+
+const SpanSheet_SpanFragment = graphql(`
+  fragment SpanSheet_SpanFragment on Span {
+    id
+    resourceAttributes
+    spanAttributes
+    name
+    duration
+  }
+`);
+
+type SpanSheetProps = {
+  span: FragmentType<typeof SpanSheet_SpanFragment> | null;
+  onClose: () => void;
+};
+
+function SpanSheet(props: SpanSheetProps) {
+  const span = useFragment(SpanSheet_SpanFragment, props.span);
+  const [activeView, setActiveView] = useState<'span-attributes' | 'resource-attributes'>(
+    'span-attributes',
+  );
+
+  // TODO: maybe loading or not found state???
+  if (!span) {
+    return null;
+  }
+
+  const spanAttributes = Array.from(Object.entries(span.spanAttributes)).map(
+    ([key, value]) => ({ key, value }) satisfies { key: string; value: unknown },
+  );
+
+  const resourceAttributes = Array.from(Object.entries(span.resourceAttributes)).map(
+    ([key, value]) => ({ key, value }) satisfies { key: string; value: unknown },
+  );
+
+  return (
+    <Sheet open={true} onOpenChange={props.onClose}>
+      <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
+        <SheetHeader className="relative border-b border-gray-800 p-4">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="text-lg font-medium text-white">
+              Span Details
+              <span className="text-muted-foreground ml-2 font-mono font-normal">
+                {span.id.substring(0, 4)}
+              </span>
+            </SheetTitle>
+          </div>
+          <SheetDescription className="mt-1 text-xs text-gray-400">
+            Span ID: <span className="font-mono">{span.id}</span>
+          </SheetDescription>
+          <div className="mt-2 flex items-center gap-3 text-xs">
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3 text-gray-400" />
+              <span className="text-gray-300">{formatNanoseconds(BigInt(span.duration))}</span>
+            </div>
+          </div>
+        </SheetHeader>
+        <div>
+          <div className="flex h-full flex-col">
+            <div className="sticky top-0 z-10 border-b border-gray-800">
+              <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+                <TabButton
+                  isActive={activeView === 'span-attributes'}
+                  onClick={() => setActiveView('span-attributes')}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <div>Span Attributes</div>
+                    <div>
+                      <Badge
+                        variant="secondary"
+                        className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                      >
+                        {Array.from(Object.keys(span.spanAttributes)).length}
+                      </Badge>
+                    </div>
+                  </div>
+                </TabButton>
+                <TabButton
+                  isActive={activeView === 'resource-attributes'}
+                  onClick={() => setActiveView('resource-attributes')}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <div>Resource Attributes</div>
+                    <div>
+                      <Badge
+                        variant="secondary"
+                        className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                      >
+                        {resourceAttributes.length}
+                      </Badge>
+                    </div>
+                  </div>
+                </TabButton>
+                {/* <TabButton
+                  isActive={activeView === 'events'}
+                  onClick={() => setActiveView('events')}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <div>Events</div>
+                    <div>
+                      <Badge
+                        variant="secondary"
+                        className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                      >
+                        3
+                      </Badge>
+                    </div>
+                  </div>
+                </TabButton>
+                <TabButton
+                  isActive={activeView === 'operation'}
+                  onClick={() => setActiveView('operation')}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <div>Operation</div>
+                  </div>
+                </TabButton> */}
+              </div>
+            </div>
+            <div className="h-full">
+              {activeView === 'span-attributes' && (
+                <div>
+                  {spanAttributes.length > 0 ? (
+                    <div>
+                      {spanAttributes.map(attribute => (
+                        <AttributeRow
+                          key={attribute.key}
+                          attributeKey={attribute.key}
+                          value={String(attribute.value)}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="py-4 text-center">
+                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <p className="text-xs text-gray-500">
+                        No span attributes found for this span.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+              {activeView === 'resource-attributes' && (
+                <div>
+                  {resourceAttributes.length > 0 ? (
+                    <div>
+                      {resourceAttributes.map(attribute => (
+                        <AttributeRow
+                          key={attribute.key}
+                          attributeKey={attribute.key}
+                          value={String(attribute.value)}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="py-4 text-center">
+                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <p className="text-xs text-gray-500">
+                        No resource attributes found for this span.
+                      </p>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+type AttributeRowProps = {
+  attributeKey: string;
+  value: string;
+};
+
+function AttributeRow(props: AttributeRowProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const clipboard = useClipboard();
+
+  const actionsNode = (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => clipboard(props.value)}
+            className="ml-auto"
+          >
+            <CopyIcon size="10" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Copy attribute value</TooltipContent>
+      </Tooltip>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon-xs" onClick={() => setIsExpanded(bool => !bool)}>
+            {isExpanded ? <ChevronUp size="14" /> : <ChevronDown size="14" />}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{isExpanded ? 'Collapse' : 'Expand'}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+
+  return (
+    <div
+      key={props.attributeKey}
+      className={cn(
+        'border-border flex items-center justify-between border-b px-3 py-3 text-xs',
+        isExpanded && 'flex-col text-left',
+      )}
+    >
+      <div className={cn('flex flex-1 pr-2 text-gray-400', isExpanded && 'w-full pr-0')}>
+        {props.attributeKey}
+        {isExpanded && actionsNode}
+      </div>
+      <div
+        className={cn(
+          'w-full flex-1 pt-2 font-mono text-white',
+          !isExpanded && 'overflow-hidden text-ellipsis text-nowrap pt-0',
+        )}
+      >
+        {props.value}
+      </div>
+      {!isExpanded && actionsNode}
+    </div>
+  );
+}
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 48d5ae344f..a4cbd80b34 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -683,17 +683,26 @@ const targetTracesRoute = createRoute({
   },
 });
 
+const TargetTraceRouteSearchModel = z.object({
+  activeSpanId: z.string().optional(),
+});
+
 const targetTraceRoute = createRoute({
   getParentRoute: () => targetRoute,
+  validateSearch(search) {
+    return TargetTraceRouteSearchModel.parse(search);
+  },
   path: 'trace/$traceId',
   component: function TargetTraceRoute() {
     const { organizationSlug, projectSlug, targetSlug, traceId } = targetTraceRoute.useParams();
+    const { activeSpanId } = targetTraceRoute.useSearch();
     return (
       <TargetTracePage
-        traceId={traceId}
         organizationSlug={organizationSlug}
         projectSlug={projectSlug}
         targetSlug={targetSlug}
+        traceId={traceId}
+        activeSpanId={activeSpanId ?? null}
       />
     );
   },

From 570b0b06a77d998ecb337b90895a5d2a1021498c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 6 Jun 2025 15:52:55 +0200
Subject: [PATCH 021/123] moar wip

---
 configs/gateway.config.ts                   |  33 +-
 docker/configs/otel-collector/config.yaml   |  45 +--
 packages/web/app/src/pages/target-trace.tsx | 404 +++++++++++++-------
 3 files changed, 312 insertions(+), 170 deletions(-)

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
index e4aa5c0df8..597a061870 100644
--- a/configs/gateway.config.ts
+++ b/configs/gateway.config.ts
@@ -7,7 +7,7 @@
  *   -e HIVE_ORGANIZATION_ACCESS_TOKEN="<organization_access_key>"
  *   -e HIVE_TARGET_REF="<target_ref>"
  *   -e DEBUG=1
- *   ghcr.io/graphql-hive/gateway supergraph \
+ *   ghcr.io/graphql-hive/gateway:1.14.3-alpha-cf354599f0bca73b6f8b010a6747e42a17ef20d7 supergraph \
  *   "http://host.docker.internal:3001/artifacts/v1/<target_id>" \
  *   --hive-cdn-key '<cdn_key>'
  * ````
@@ -27,6 +27,12 @@ const useOnFetchTracer = (): GatewayPlugin => {
     onFetch({ url, options }) {
       upstreamCallHeaders.push({ url, headers: options.headers });
     },
+    // onSubgraphExecute({ executionRequest, requestId, subgraphName, ...res }) {
+    //   return async function onSubgraphExecuteDone({ result }) {
+    //     const span = trace.getSpan(executionRequest.context.opentelemetry.activeContext());
+    //     console.log('DUDUDUDUDUDUDUD', span);
+    //   };
+    // },
     onRequest({ request, url, endResponse, fetchAPI }) {
       if (url.pathname === '/upstream-fetch' && request.method === 'GET') {
         endResponse(fetchAPI.Response.json(upstreamCallHeaders));
@@ -71,6 +77,8 @@ class HiveTracingSpanProcessor implements SpanProcessor {
     const traceId = spanContext.traceId;
     const spanId = spanContext.spanId;
 
+    console.log(traceId, spanId);
+
     // Initialize trace data structures if needed
     if (!this.activeSpans.has(traceId)) {
       this.activeSpans.set(traceId, new Map());
@@ -82,7 +90,8 @@ class HiveTracingSpanProcessor implements SpanProcessor {
     this.activeSpans.get(traceId)!.set(spanId, span);
 
     // If this is a root span (no parent), mark it as the root span for this trace
-    if (!span.parentSpanId) {
+    // if (!span.parentSpanId) {
+    if (!span.parentSpanContext?.spanId) {
       this.rootSpanIds.set(traceId, spanId);
     }
 
@@ -128,9 +137,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
             rootSpan.setAttribute('hive.graphql.operation.type', operationType);
             rootSpan.setAttribute('hive.graphql.operation.name', operationName ?? '');
             rootSpan.setAttribute('hive.graphql.operation.document', document);
-
-            if (errorCount !== undefined)
-              rootSpan.setAttribute('hive.graphql.error.count', errorCount);
+            rootSpan.setAttribute('hive.graphql.error.count', String(errorCount ?? 0));
 
             // Add the subgraph names as a comma-separated list
             if (subgraphNamesForTrace && subgraphNamesForTrace.size > 0) {
@@ -147,6 +154,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
     // For any subgraph span that's ending, make sure we capture its name
     if (span.name && span.name.startsWith('subgraph.execute')) {
       const subgraphName = span.attributes['gateway.upstream.subgraph.name'];
+
       if (subgraphName && typeof subgraphName === 'string' && subgraphNamesForTrace) {
         subgraphNamesForTrace.add(subgraphName);
 
@@ -161,6 +169,20 @@ class HiveTracingSpanProcessor implements SpanProcessor {
           }
         }
       }
+
+      // add hive branded attributes
+      //
+      span.attributes['hive.graphql.subgraph.name'] =
+        span.attributes['gateway.upstream.subgraph.name'];
+      span.attributes['hive.graphql.operation.document'] = span.attributes['graphql.document'];
+      span.attributes['hive.graphql.operation.name'] = span.attributes['graphql.operation.name'];
+      span.attributes['hive.graphql.operation.type'] = span.attributes['graphql.operation.type'];
+      // TODO: attributes for error codes
+      // hive.graphql.error.count
+      span.attributes['hive.graphql.error.count'] = '0';
+      // hive.graphql.error.codes
+      // span.setAttribute('hive.graphql.error.codes', '');
+      //
     }
 
     // Clean up the span reference
@@ -195,6 +217,7 @@ async function createHiveTracingSpanProcessor(): Promise<HiveTracingSpanProcesso
 
 export const gatewayConfig = defineConfig({
   openTelemetry: {
+    contextManager: false,
     exporters: [
       createHiveTracingSpanProcessor(),
       createOtlpHttpExporter(
diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 068a437f6d..f0aac31c62 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -26,28 +26,29 @@ processors:
       - key: hive.target_id
         from_context: auth.targetId
         action: insert
-  filter/drop_missing_attributes:
-    error_mode: ignore
-    traces:
-      span:
-        # prettier-ignore
-        - not (
-            attributes["http.status"] != nil and
-            attributes["http.host"] != nil and
-            attributes["http.method"] != nil and
-            attributes["http.route"] != nil and
-            attributes["http.url"] != nil and
-            (
-              attributes["hive.graphql.operation.type"] == "query" or
-              attributes["hive.graphql.operation.type"] == "mutation" or
-              attributes["hive.graphql.operation.type"] == "subscription"
-            )
-          )
+  # filter/drop_missing_attributes:
+  #   error_mode: ignore
+  #   traces:
+  #     span:
+  #       # prettier-ignore
+  #       - not (
+  #           attributes["http.status"] != nil and
+  #           attributes["http.host"] != nil and
+  #           attributes["http.method"] != nil and
+  #           attributes["http.route"] != nil and
+  #           attributes["http.url"] != nil and
+  #           attributes["hive.graphql.operation.document"] != nil and
+  #           (
+  #             attributes["hive.graphql.operation.type"] == "query" or
+  #             attributes["hive.graphql.operation.type"] == "mutation" or
+  #             attributes["hive.graphql.operation.type"] == "subscription"
+  #           )
+  #         )
 exporters:
-  # debug:
-  #   verbosity: detailed
-  #   sampling_initial: 5
-  #   sampling_thereafter: 200
+  debug:
+    verbosity: detailed
+    sampling_initial: 5
+    sampling_thereafter: 200
   clickhouse:
     endpoint: tcp://clickhouse:9000?dial_timeout=10s&compress=lz4
     database: default
@@ -83,4 +84,4 @@ service:
           # filter/drop_missing_attributes,
           batch,
         ]
-      exporters: [clickhouse]
+      exporters: [clickhouse, debug]
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 35ec282136..56bf0ba052 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1,5 +1,16 @@
 import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { AlertTriangle, ChevronDown, ChevronUp, Clock, CopyIcon } from 'lucide-react';
+import {
+  AlertTriangle,
+  ArrowUp,
+  ChevronDown,
+  ChevronUp,
+  Clock,
+  CopyIcon,
+  Link as LinkLucide,
+  PieChart,
+  Play,
+  TreePine,
+} from 'lucide-react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { useQuery } from 'urql';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
@@ -13,6 +24,7 @@ import {
   Sheet,
   SheetContent,
   SheetDescription,
+  SheetFooter,
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
@@ -20,9 +32,11 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { useClipboard } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
-import { useNavigate } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import { useWidthSync, WidthSyncProvider } from './target-traces-width';
 
+const rootTraceColor = 'rgb(244, 183, 64)';
+
 const fetchProductsQueryString = `
   query FetchProduct {
     products {
@@ -43,10 +57,13 @@ function TraceView(props: {
   rootSpan: SpanFragmentWithChildren;
   serviceNames: string[];
   totalTraceDuration: bigint;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
 }) {
   const [width] = useWidthSync();
   const [highlightedServiceName, setHighlightedServiceName] = useState<string | null>(null);
-  const serviceNames = props.serviceNames;
 
   const timestamps = splitNanosecondsToMsIntervals(props.totalTraceDuration);
 
@@ -92,13 +109,17 @@ function TraceView(props: {
             leftPanelWidth={width}
             rootSpan={props.rootSpan}
             highlightedServiceName={highlightedServiceName}
-            serviceNames={serviceNames}
+            serviceNames={props.serviceNames}
+            organizationSlug={props.organizationSlug}
+            projectSlug={props.projectSlug}
+            targetSlug={props.targetSlug}
+            traceId={props.traceId}
           />
         </div>
       </ScrollArea>
       <div className="sticky bottom-0 z-10 px-2 py-4">
         <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
-          {serviceNames.map(serviceName => (
+          {props.serviceNames.map(serviceName => (
             <div
               key={serviceName}
               className="flex cursor-pointer items-center gap-2 hover:text-white"
@@ -324,14 +345,15 @@ function TraceTree(props: {
   rootSpan: SpanFragmentWithChildren;
   leftPanelWidth: number;
   serviceNames: Array<string>;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
 }) {
   const rootSpan = useFragment(SpanFragment, props.rootSpan.span);
   const [width] = useWidthSync();
   const minWidth = 175;
   const maxWidth = 450;
-  const serviceNameToColorMap = Object.fromEntries(
-    props.serviceNames.map((name, index) => [name, colors[index % colors.length]]),
-  );
   const containerRef = useRef<HTMLDivElement>(null);
 
   const durationNs = differenceInNanoseconds(rootSpan.endTime, rootSpan.startTime);
@@ -339,7 +361,7 @@ function TraceTree(props: {
   return (
     <div className="relative" ref={containerRef}>
       <TraceResize minWidth={minWidth} maxWidth={maxWidth} />
-      <Node
+      <SpanNode
         key={rootSpan.id}
         level={0}
         highlightedServiceName={props.highlightedServiceName}
@@ -349,25 +371,19 @@ function TraceTree(props: {
         parentSpan={null}
         groupLines={[]}
         parentColor={null}
-        color={colors[0]}
-        serviceNameToColorMap={serviceNameToColorMap}
+        color={rootTraceColor}
         serviceName={null}
         isLastChild={false}
+        organizationSlug={props.organizationSlug}
+        projectSlug={props.projectSlug}
+        targetSlug={props.targetSlug}
+        traceId={props.traceId}
       />
     </div>
   );
 }
 
-type SpanProps = {
-  id: string;
-  title: string;
-  serviceName?: string;
-  duration: number;
-  startedAt: number;
-  children: SpanProps[];
-};
-
-type NodeProps = {
+type SpanNodeProps = {
   highlightedServiceName: string | null;
   level: number;
   totalDurationNs: bigint;
@@ -377,29 +393,19 @@ type NodeProps = {
   groupLines: boolean[];
   color: string;
   parentColor: string | null;
-  serviceNameToColorMap: Record<string, string>;
   serviceName: string | null;
   isLastChild: boolean;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
 };
 
 function countChildren(spans: SpanFragmentWithChildren[]): number {
   return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
 }
 
-const colors = [
-  '#2662d8',
-  '#2eb88a',
-  '#e88d30',
-  '#af56db',
-  '#7BA4F9',
-  '#D8B5FF',
-  '#64748B',
-  '#6C5CE7',
-  '#F27059',
-  '#2D9D78',
-];
-
-function Node(props: NodeProps) {
+function SpanNode(props: SpanNodeProps) {
   const span = useFragment(SpanFragment, props.span.span);
 
   const [collapsed, setCollapsed] = useState(false);
@@ -427,33 +433,20 @@ function Node(props: NodeProps) {
   const canBeCollapsed = props.span.children.length > 0;
   const parentColor = props.parentColor ?? props.color;
 
-  const percentageOfTotal = (
-    (nanosecondsToMilliseconds(props.span.durationNs) /
-      nanosecondsToMilliseconds(props.totalDurationNs)) *
-    100
-  ).toFixed(2);
-
-  const percentageOfParent = props.parentSpan
-    ? (
-        (nanosecondsToMilliseconds(props.span.durationNs) /
-          nanosecondsToMilliseconds(props.parentSpan.durationNs)) *
-        100
-      ).toFixed(2)
-    : null;
-
-  const navigate = useNavigate({
-    from: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
-  });
-
   return (
     <>
-      <div className="cursor-pointer pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
+      <div className="pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
         <div className="relative flex h-8 w-full items-center overflow-hidden">
           <div
             className="relative flex h-8 shrink-0 items-center gap-x-2 overflow-hidden pl-1"
             style={{ width: `${props.leftPanelWidth}px` }}
           >
-            <div className="flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500">
+            <div
+              className={cn(
+                'flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500',
+                canBeCollapsed && 'cursor-pointer',
+              )}
+            >
               <TreeIcon
                 key={`tree-icon-${span.id}`}
                 isLeaf={props.span.children.length === 0}
@@ -482,11 +475,19 @@ function Node(props: NodeProps) {
               </div>
             ) : null}
           </div>
-          <div
+          <Link
             className={cn(
-              'relative flex h-full grow items-center overflow-hidden',
+              'relative flex h-full grow cursor-pointer items-center overflow-hidden',
               isDimmed ? 'opacity-25' : '',
             )}
+            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+            params={{
+              organizationSlug: props.organizationSlug,
+              projectSlug: props.projectSlug,
+              targetSlug: props.targetSlug,
+              traceId: props.traceId,
+            }}
+            search={{ activeSpanId: span.id }}
           >
             <Tooltip disableHoverableContent delayDuration={100}>
               <TooltipTrigger asChild>
@@ -497,12 +498,6 @@ function Node(props: NodeProps) {
                     width: `${widthPercentage}%`,
                     backgroundColor: props.color,
                   }}
-                  onClick={() => {
-                    navigate({
-                      to: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
-                      search: { activeSpanId: span.id },
-                    });
-                  }}
                 >
                   <div
                     className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
@@ -533,7 +528,7 @@ function Node(props: NodeProps) {
                     </div>
 
                     <div className="text-gray-400">% of Total</div>
-                    <div className="text-right font-mono">{percentageOfTotal}%</div>
+                    <div className="text-right font-mono">{props.span.percentageOfTotal}%</div>
 
                     <div className="col-span-2">
                       {/* Timeline visualization */}
@@ -541,16 +536,21 @@ function Node(props: NodeProps) {
                         <div className="h-[2px] w-full overflow-hidden bg-gray-800">
                           <div
                             className="h-full"
-                            style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
+                            style={{
+                              width: `${props.span.percentageOfTotal}%`,
+                              backgroundColor: rootTraceColor,
+                            }}
                           />
                         </div>
                       </div>
                     </div>
 
-                    {percentageOfParent === null ? null : (
+                    {props.span.percentageOfParentSpan === null ? null : (
                       <>
                         <div className="text-gray-400">% of Parent</div>
-                        <div className="text-right font-mono">{percentageOfParent}%</div>
+                        <div className="text-right font-mono">
+                          {props.span.percentageOfParentSpan}%
+                        </div>
 
                         <div className="col-span-2">
                           {/* Timeline visualization */}
@@ -559,7 +559,7 @@ function Node(props: NodeProps) {
                               <div
                                 className="h-full"
                                 style={{
-                                  width: `${percentageOfParent}%`,
+                                  width: `${props.span.percentageOfParentSpan}%`,
                                   backgroundColor: parentColor,
                                 }}
                               />
@@ -572,7 +572,7 @@ function Node(props: NodeProps) {
                 </div>
               </TooltipContent>
             </Tooltip>
-          </div>
+          </Link>
         </div>
       </div>
       {collapsed
@@ -588,7 +588,7 @@ function Node(props: NodeProps) {
 
               const isLastChild = i === arr.length - 1;
               return (
-                <Node
+                <SpanNode
                   key={span.id}
                   span={childSpan}
                   highlightedServiceName={props.highlightedServiceName}
@@ -603,14 +603,13 @@ function Node(props: NodeProps) {
                       : props.groupLines.concat(true)
                   }
                   parentColor={props.color}
-                  color={
-                    serviceName
-                      ? stringToHSL(props.serviceNameToColorMap[serviceName])
-                      : props.color
-                  }
-                  serviceNameToColorMap={props.serviceNameToColorMap}
+                  color={serviceName ? stringToHSL(serviceName) : props.color}
                   serviceName={serviceName}
                   isLastChild={isLastChild}
+                  organizationSlug={props.organizationSlug}
+                  projectSlug={props.projectSlug}
+                  targetSlug={props.targetSlug}
+                  traceId={props.traceId}
                 />
               );
             })
@@ -652,13 +651,19 @@ const TraceSheet_TraceFragment = graphql(`
 type TraceSheetProps = {
   trace: FragmentType<typeof TraceSheet_TraceFragment>;
   activeSpanId: string | null;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
 };
 
 function TraceSheet(props: TraceSheetProps) {
   const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
   const trace = useFragment(TraceSheet_TraceFragment, props.trace);
 
-  const rootSpan = useMemo(() => createSpanTreeStructure(trace.spans), [trace.spans]);
+  const [rootSpan, spanLookupMap] = useMemo(
+    () => createSpanTreeStructure(trace.spans),
+    [trace.spans],
+  );
   const rootSpanUnmasked = useFragment(SpanFragment, rootSpan.span);
 
   const spanAttributes: Array<TraceAttribute> = Array.from(
@@ -688,6 +693,10 @@ function TraceSheet(props: TraceSheetProps) {
                 rootSpan={rootSpan}
                 serviceNames={trace.subgraphs}
                 totalTraceDuration={totalTraceDuration}
+                organizationSlug={props.organizationSlug}
+                projectSlug={props.projectSlug}
+                targetSlug={props.targetSlug}
+                traceId={trace.id}
               />
             </WidthSyncProvider>
           </ResizablePanel>
@@ -831,12 +840,17 @@ function TraceSheet(props: TraceSheetProps) {
       {props.activeSpanId && (
         <SpanSheet
           span={trace.spans.find(trace => trace.id === props.activeSpanId) ?? null}
+          computedSpanMetrics={spanLookupMap.get(props.activeSpanId) ?? null}
           onClose={() =>
             navigate({
               to: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
               search: {},
             })
           }
+          organizationSlug={props.organizationSlug}
+          projectSlug={props.projectSlug}
+          targetSlug={props.targetSlug}
+          traceId={trace.id}
         />
       )}
     </div>
@@ -866,7 +880,15 @@ function TargetInsightsNewPageContent(props: {
     return null;
   }
 
-  return <TraceSheet trace={result.data.target.trace} activeSpanId={props.activeSpanId} />;
+  return (
+    <TraceSheet
+      organizationSlug={props.organizationSlug}
+      projectSlug={props.projectSlug}
+      targetSlug={props.targetSlug}
+      trace={result.data.target.trace}
+      activeSpanId={props.activeSpanId}
+    />
+  );
 }
 
 export function TargetTracePage(props: {
@@ -929,16 +951,21 @@ const SpanFragment = graphql(/* GraphQL */ `
   }
 `);
 
-type SpanFragmentWithChildren = {
-  span: FragmentType<typeof SpanFragment>;
-  children: Array<SpanFragmentWithChildren>;
+type ComputedSpanMetrics = {
   durationNs: bigint;
   startNs: bigint;
+  percentageOfTotal: string;
+  percentageOfParentSpan: string | null;
 };
 
+type SpanFragmentWithChildren = {
+  span: FragmentType<typeof SpanFragment>;
+  children: Array<SpanFragmentWithChildren>;
+} & ComputedSpanMetrics;
+
 function createSpanTreeStructure(
   fragments: Array<FragmentType<typeof SpanFragment>>,
-): SpanFragmentWithChildren {
+): [SpanFragmentWithChildren, ReadonlyMap<string, SpanFragmentWithChildren>] {
   const itemsById = new Map</* id */ string, SpanFragmentWithChildren>();
   let root: SpanFragmentWithChildren | null = null;
   for (const fragment of fragments) {
@@ -949,6 +976,8 @@ function createSpanTreeStructure(
       children: [],
       durationNs: differenceInNanoseconds(ufragment.endTime, ufragment.startTime),
       startNs: 0n,
+      percentageOfTotal: '',
+      percentageOfParentSpan: null,
     };
 
     itemsById.set(ufragment.id, fragmentWithChildren);
@@ -970,8 +999,21 @@ function createSpanTreeStructure(
     if (!uitem.parentId) {
       continue;
     }
-    itemsById.get(uitem.parentId)?.children.push(item);
+    const parent = itemsById.get(uitem.parentId);
+    if (!parent) {
+      throw new Error('Missing parent.');
+    }
+
+    parent.children.push(item);
     item.startNs = parseRFC3339ToEpochNanos(uitem.startTime) - startNS;
+    item.percentageOfTotal = (
+      (nanosecondsToMilliseconds(item.durationNs) / nanosecondsToMilliseconds(root.durationNs)) *
+      100
+    ).toFixed(2);
+    item.percentageOfParentSpan = (
+      (nanosecondsToMilliseconds(item.durationNs) / nanosecondsToMilliseconds(parent.durationNs)) *
+      100
+    ).toFixed(2);
   }
 
   for (const item of itemsById.values()) {
@@ -986,12 +1028,16 @@ function createSpanTreeStructure(
     });
   }
 
-  return root;
+  return [root, itemsById as ReadonlyMap<string, SpanFragmentWithChildren>] as const;
 }
 
 function formatNanoseconds(nsBigInt: bigint) {
   const TEN_THOUSAND_NS = 10000n;
 
+  if (nsBigInt === 0n) {
+    return `0ms`;
+  }
+
   if (nsBigInt < TEN_THOUSAND_NS) {
     return `${nsBigInt}ns`;
   }
@@ -1082,12 +1128,18 @@ const SpanSheet_SpanFragment = graphql(`
     spanAttributes
     name
     duration
+    parentId
   }
 `);
 
 type SpanSheetProps = {
   span: FragmentType<typeof SpanSheet_SpanFragment> | null;
+  computedSpanMetrics: ComputedSpanMetrics | null;
   onClose: () => void;
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
 };
 
 function SpanSheet(props: SpanSheetProps) {
@@ -1095,6 +1147,7 @@ function SpanSheet(props: SpanSheetProps) {
   const [activeView, setActiveView] = useState<'span-attributes' | 'resource-attributes'>(
     'span-attributes',
   );
+  const clipboard = useClipboard();
 
   // TODO: maybe loading or not found state???
   if (!span) {
@@ -1111,27 +1164,80 @@ function SpanSheet(props: SpanSheetProps) {
 
   return (
     <Sheet open={true} onOpenChange={props.onClose}>
-      <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
+      <SheetContent className="flex flex-col border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
         <SheetHeader className="relative border-b border-gray-800 p-4">
           <div className="flex items-center justify-between">
             <SheetTitle className="text-lg font-medium text-white">
-              Span Details
+              {!span.parentId && 'Root '}Span Details
               <span className="text-muted-foreground ml-2 font-mono font-normal">
                 {span.id.substring(0, 4)}
               </span>
+              <span className="text-muted-foreground ml-2">{span.name}</span>
             </SheetTitle>
           </div>
           <SheetDescription className="mt-1 text-xs text-gray-400">
             Span ID: <span className="font-mono">{span.id}</span>
+            <CopyIconButton value={span.id} label="Copy Span ID" />
           </SheetDescription>
-          <div className="mt-2 flex items-center gap-3 text-xs">
-            <div className="flex items-center gap-1">
-              <Clock className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-300">{formatNanoseconds(BigInt(span.duration))}</span>
+          {props.computedSpanMetrics && (
+            <div className="grid grid-cols-2 gap-4 pt-3 md:grid-cols-4">
+              {/* Duration */}
+              <div className="flex items-center space-x-2">
+                <Clock className="h-4 w-4 text-blue-500" />
+                <div>
+                  <p className="text-muted-foreground text-xs">Duration</p>
+                  <p className="text-sm font-medium">
+                    {' '}
+                    {formatNanoseconds(props.computedSpanMetrics.durationNs)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Start Time */}
+              {props.computedSpanMetrics.startNs !== 0n && (
+                <div className="flex items-center space-x-2">
+                  <Play className="h-4 w-4 text-green-500" />
+                  <div>
+                    <p className="text-muted-foreground text-xs">Start</p>
+                    <p className="text-sm font-medium">
+                      {' '}
+                      {formatNanoseconds(props.computedSpanMetrics.startNs)}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Percentage of Total */}
+              {props.computedSpanMetrics.percentageOfTotal && (
+                <div className="flex items-center space-x-2">
+                  <PieChart className="h-4 w-4 text-purple-500" />
+                  <div>
+                    <p className="text-muted-foreground text-xs">% of Total</p>
+                    <p className="text-sm font-medium">
+                      {' '}
+                      {props.computedSpanMetrics.percentageOfTotal}%
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Percentage of Parent */}
+              {props.computedSpanMetrics.percentageOfParentSpan && (
+                <div className="flex items-center space-x-2">
+                  <TreePine className="h-4 w-4 text-orange-500" />
+                  <div>
+                    <p className="text-muted-foreground text-xs">% of Parent</p>
+                    <p className="text-sm font-medium">
+                      {' '}
+                      {props.computedSpanMetrics.percentageOfParentSpan}%
+                    </p>
+                  </div>
+                </div>
+              )}
             </div>
-          </div>
+          )}
         </SheetHeader>
-        <div>
+        <div className="overflow-hidden">
           <div className="flex h-full flex-col">
             <div className="sticky top-0 z-10 border-b border-gray-800">
               <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
@@ -1167,33 +1273,9 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   </div>
                 </TabButton>
-                {/* <TabButton
-                  isActive={activeView === 'events'}
-                  onClick={() => setActiveView('events')}
-                >
-                  <div className="flex items-center gap-x-2">
-                    <div>Events</div>
-                    <div>
-                      <Badge
-                        variant="secondary"
-                        className="rounded-md px-2 py-0.5 text-[10px] font-thin"
-                      >
-                        3
-                      </Badge>
-                    </div>
-                  </div>
-                </TabButton>
-                <TabButton
-                  isActive={activeView === 'operation'}
-                  onClick={() => setActiveView('operation')}
-                >
-                  <div className="flex items-center gap-x-2">
-                    <div>Operation</div>
-                  </div>
-                </TabButton> */}
               </div>
             </div>
-            <div className="h-full">
+            <div className="overflow-y-scroll">
               {activeView === 'span-attributes' && (
                 <div>
                   {spanAttributes.length > 0 ? (
@@ -1241,6 +1323,27 @@ function SpanSheet(props: SpanSheetProps) {
             </div>
           </div>
         </div>
+        <SheetFooter className="mt-auto border-t p-2">
+          {span.parentId && (
+            <Button variant="ghost" size="sm" asChild>
+              <Link
+                to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                params={{
+                  organizationSlug: props.organizationSlug,
+                  projectSlug: props.projectSlug,
+                  targetSlug: props.targetSlug,
+                  traceId: props.traceId,
+                }}
+                search={{ activeSpanId: span.parentId }}
+              >
+                <ArrowUp className="mr-2 h-4 w-4" /> Show Parent Span
+              </Link>
+            </Button>
+          )}
+          <Button variant="ghost" size="sm" onClick={() => clipboard(window.location.href)}>
+            <LinkLucide className="mr-2 h-4 w-4" /> Share Link
+          </Button>
+        </SheetFooter>
       </SheetContent>
     </Sheet>
   );
@@ -1253,39 +1356,28 @@ type AttributeRowProps = {
 
 function AttributeRow(props: AttributeRowProps) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const clipboard = useClipboard();
 
   const actionsNode = (
-    <TooltipProvider>
-      <Tooltip delayDuration={0}>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            onClick={() => clipboard(props.value)}
-            className="ml-auto"
-          >
-            <CopyIcon size="10" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Copy attribute value</TooltipContent>
-      </Tooltip>
-      <Tooltip delayDuration={0}>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="icon-xs" onClick={() => setIsExpanded(bool => !bool)}>
-            {isExpanded ? <ChevronUp size="14" /> : <ChevronDown size="14" />}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{isExpanded ? 'Collapse' : 'Expand'}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <>
+      <CopyIconButton value={props.value} label="Copy attribute value" />
+      <TooltipProvider>
+        <Tooltip delayDuration={0}>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-xs" onClick={() => setIsExpanded(bool => !bool)}>
+              {isExpanded ? <ChevronUp size="14" /> : <ChevronDown size="14" />}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{isExpanded ? 'Collapse' : 'Expand'}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </>
   );
 
   return (
     <div
       key={props.attributeKey}
       className={cn(
-        'border-border flex items-center justify-between border-b px-3 py-3 text-xs',
+        'border-border flex items-center justify-between border-b px-3 py-3 text-xs last:border-0',
         isExpanded && 'flex-col text-left',
       )}
     >
@@ -1305,3 +1397,29 @@ function AttributeRow(props: AttributeRowProps) {
     </div>
   );
 }
+
+type CopyIconButtonProps = {
+  label: string;
+  value: string;
+};
+
+function CopyIconButton(props: CopyIconButtonProps) {
+  const clipboard = useClipboard();
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={0}>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            onClick={() => clipboard(props.value)}
+            className="ml-auto"
+          >
+            <CopyIcon size="10" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>{props.label}</TooltipContent>
+      </Tooltip>{' '}
+    </TooltipProvider>
+  );
+}

From 83a6831483ee48f3e216946c58e330787276727c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 10 Jun 2025 11:09:49 +0200
Subject: [PATCH 022/123] ui consistency

---
 packages/web/app/src/pages/target-trace.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 56bf0ba052..b47ce13fc1 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1358,19 +1358,19 @@ function AttributeRow(props: AttributeRowProps) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   const actionsNode = (
-    <>
+    <span className="ml-auto mr-0 flex text-white">
       <CopyIconButton value={props.value} label="Copy attribute value" />
       <TooltipProvider>
-        <Tooltip delayDuration={0}>
+        <Tooltip delayDuration={0} disableHoverableContent>
           <TooltipTrigger asChild>
             <Button variant="ghost" size="icon-xs" onClick={() => setIsExpanded(bool => !bool)}>
               {isExpanded ? <ChevronUp size="14" /> : <ChevronDown size="14" />}
             </Button>
           </TooltipTrigger>
-          <TooltipContent>{isExpanded ? 'Collapse' : 'Expand'}</TooltipContent>
+          <TooltipContent className="text-xs">{isExpanded ? 'Collapse' : 'Expand'}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
-    </>
+    </span>
   );
 
   return (
@@ -1407,7 +1407,7 @@ function CopyIconButton(props: CopyIconButtonProps) {
   const clipboard = useClipboard();
   return (
     <TooltipProvider>
-      <Tooltip delayDuration={0}>
+      <Tooltip delayDuration={0} disableHoverableContent>
         <TooltipTrigger asChild>
           <Button
             variant="ghost"
@@ -1418,7 +1418,7 @@ function CopyIconButton(props: CopyIconButtonProps) {
             <CopyIcon size="10" />
           </Button>
         </TooltipTrigger>
-        <TooltipContent>{props.label}</TooltipContent>
+        <TooltipContent className="text-xs">{props.label}</TooltipContent>
       </Tooltip>{' '}
     </TooltipProvider>
   );

From 95831b8f6a8b229d8539a3331d37da78fa5bec8e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 10 Jun 2025 11:38:04 +0200
Subject: [PATCH 023/123] real data

---
 .../modules/operations/providers/traces.ts    |   2 +-
 packages/web/app/src/pages/target-trace.tsx   | 177 ++++++++++++------
 2 files changed, 120 insertions(+), 59 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 96cfd56caa..a573b61462 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -246,7 +246,7 @@ const TraceModel = z.object({
     z.literal('SUBSCRIPTION'),
   ]),
   graphqlErrorCodes: z.array(z.string()).nullable(),
-  subgraphNames: z.array(z.string()),
+  subgraphNames: z.array(z.string()).transform(s => (s.length === 1 && s.at(0) === '' ? [] : s)),
 });
 
 export type Trace = z.TypeOf<typeof TraceModel>;
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index b47ce13fc1..0e264005c2 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -49,8 +49,7 @@ const fetchProductsQueryString = `
 
 interface TraceAttribute {
   name: string;
-  value: string | number | ReactNode;
-  category?: string;
+  value: string;
 }
 
 function TraceView(props: {
@@ -117,26 +116,28 @@ function TraceView(props: {
           />
         </div>
       </ScrollArea>
-      <div className="sticky bottom-0 z-10 px-2 py-4">
-        <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
-          {props.serviceNames.map(serviceName => (
-            <div
-              key={serviceName}
-              className="flex cursor-pointer items-center gap-2 hover:text-white"
-              onMouseEnter={() => setHighlightedServiceName(serviceName)}
-              onMouseLeave={() => setHighlightedServiceName(null)}
-            >
+      {props.serviceNames && (
+        <div className="sticky bottom-0 z-10 px-2 py-4">
+          <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
+            {props.serviceNames.map(serviceName => (
               <div
-                className="size-2"
-                style={{
-                  backgroundColor: stringToHSL(serviceName),
-                }}
-              />
-              <div>{serviceName}</div>
-            </div>
-          ))}
+                key={serviceName}
+                className="flex cursor-pointer items-center gap-2 hover:text-white"
+                onMouseEnter={() => setHighlightedServiceName(serviceName)}
+                onMouseLeave={() => setHighlightedServiceName(null)}
+              >
+                <div
+                  className="size-2"
+                  style={{
+                    backgroundColor: stringToHSL(serviceName),
+                  }}
+                />
+                <div>{serviceName}</div>
+              </div>
+            ))}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }
@@ -405,6 +406,37 @@ function countChildren(spans: SpanFragmentWithChildren[]): number {
   return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
 }
 
+type NodeElementProps = {
+  leftPositionPercentage: number;
+  widthPercentage: number;
+  isNearRightEdge: boolean;
+  durationStr: string;
+  color: string;
+};
+
+function NodeElement(props: NodeElementProps) {
+  return (
+    <div
+      className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
+      style={{
+        left: `min(${props.leftPositionPercentage}%, 100% - 1px)`,
+        width: `${props.widthPercentage}%`,
+        backgroundColor: props.color,
+      }}
+    >
+      <div
+        className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
+        style={{
+          fontSize: '11px',
+          ...(props.isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+        }}
+      >
+        {props.durationStr}
+      </div>
+    </div>
+  );
+}
+
 function SpanNode(props: SpanNodeProps) {
   const span = useFragment(SpanFragment, props.span.span);
 
@@ -491,24 +523,13 @@ function SpanNode(props: SpanNodeProps) {
           >
             <Tooltip disableHoverableContent delayDuration={100}>
               <TooltipTrigger asChild>
-                <div
-                  className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
-                  style={{
-                    left: `min(${leftPositionPercentage}%, 100% - 1px)`,
-                    width: `${widthPercentage}%`,
-                    backgroundColor: props.color,
-                  }}
-                >
-                  <div
-                    className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
-                    style={{
-                      fontSize: '11px',
-                      ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
-                    }}
-                  >
-                    {formatNanoseconds(props.span.durationNs)}
-                  </div>
-                </div>
+                <NodeElement
+                  color={props.color}
+                  isNearRightEdge={isNearRightEdge}
+                  leftPositionPercentage={leftPositionPercentage}
+                  widthPercentage={widthPercentage}
+                  durationStr={formatNanoseconds(props.span.durationNs)}
+                />
               </TooltipTrigger>
               <TooltipContent
                 side="bottom"
@@ -657,7 +678,9 @@ type TraceSheetProps = {
 };
 
 function TraceSheet(props: TraceSheetProps) {
-  const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
+  const [activeView, setActiveView] = useState<
+    'span-attributes' | 'resource-attributes' | 'events' | 'operation'
+  >('span-attributes');
   const trace = useFragment(TraceSheet_TraceFragment, props.trace);
 
   const [rootSpan, spanLookupMap] = useMemo(
@@ -671,7 +694,12 @@ function TraceSheet(props: TraceSheetProps) {
   ).map(([name, value]) => ({
     name,
     value: String(value),
-    category: name.split('.')[0] ?? 'unknown',
+  }));
+  const resourceAttributes: Array<TraceAttribute> = Array.from(
+    Object.entries(rootSpanUnmasked.resourceAttributes),
+  ).map(([name, value]) => ({
+    name,
+    value: String(value),
   }));
 
   const totalTraceDuration = differenceInNanoseconds(
@@ -706,8 +734,8 @@ function TraceSheet(props: TraceSheetProps) {
               <div className="sticky top-0 z-10 border-b border-gray-800">
                 <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
                   <TabButton
-                    isActive={activeView === 'attributes'}
-                    onClick={() => setActiveView('attributes')}
+                    isActive={activeView === 'span-attributes'}
+                    onClick={() => setActiveView('span-attributes')}
                   >
                     <div className="flex items-center gap-x-2">
                       <div>Attributes</div>
@@ -716,12 +744,28 @@ function TraceSheet(props: TraceSheetProps) {
                           variant="secondary"
                           className="rounded-md px-2 py-0.5 text-[10px] font-thin"
                         >
-                          7
+                          {spanAttributes.length}
                         </Badge>
                       </div>
                     </div>
                   </TabButton>
                   <TabButton
+                    isActive={activeView === 'resource-attributes'}
+                    onClick={() => setActiveView('resource-attributes')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>Resource Attributes</div>
+                      <div>
+                        <Badge
+                          variant="secondary"
+                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                        >
+                          {resourceAttributes.length}
+                        </Badge>
+                      </div>
+                    </div>
+                  </TabButton>
+                  {/* <TabButton
                     isActive={activeView === 'events'}
                     onClick={() => setActiveView('events')}
                   >
@@ -736,7 +780,7 @@ function TraceSheet(props: TraceSheetProps) {
                         </Badge>
                       </div>
                     </div>
-                  </TabButton>
+                  </TabButton> */}
                   <TabButton
                     isActive={activeView === 'operation'}
                     onClick={() => setActiveView('operation')}
@@ -749,20 +793,16 @@ function TraceSheet(props: TraceSheetProps) {
               </div>
               <ScrollArea className="relative grow">
                 <div className="h-full">
-                  {activeView === 'attributes' ? (
+                  {activeView === 'span-attributes' ? (
                     <div>
                       {spanAttributes.length > 0 ? (
-                        <div>
-                          {spanAttributes.map((attr, index) => (
-                            <div
-                              key={index}
-                              className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
-                            >
-                              <div className="text-gray-400">{attr.name}</div>
-                              <div className="font-mono text-white">{attr.value}</div>
-                            </div>
-                          ))}
-                        </div>
+                        spanAttributes.map(attr => (
+                          <AttributeRow
+                            attributeKey={attr.name}
+                            key={attr.name}
+                            value={attr.value}
+                          />
+                        ))
                       ) : (
                         <div className="py-4 text-center">
                           <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
@@ -773,7 +813,27 @@ function TraceSheet(props: TraceSheetProps) {
                       )}
                     </div>
                   ) : null}
-                  {activeView === 'events' ? (
+                  {activeView === 'resource-attributes' ? (
+                    <div>
+                      {resourceAttributes.length > 0 ? (
+                        resourceAttributes.map(attr => (
+                          <AttributeRow
+                            attributeKey={attr.name}
+                            key={attr.name}
+                            value={attr.value}
+                          />
+                        ))
+                      ) : (
+                        <div className="py-4 text-center">
+                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                          <p className="text-xs text-gray-500">
+                            No resource attributes found for this trace
+                          </p>
+                        </div>
+                      )}
+                    </div>
+                  ) : null}
+                  {/* {activeView === 'events' ? (
                     <div className="p-4">
                       <div className="space-y-2">
                         {[
@@ -818,7 +878,7 @@ function TraceSheet(props: TraceSheetProps) {
                         ))}
                       </div>
                     </div>
-                  ) : null}
+                  ) : null} */}
                   {activeView === 'operation' ? (
                     <div className="absolute bottom-0 top-0 w-full">
                       <GraphQLHighlight
@@ -945,6 +1005,7 @@ const SpanFragment = graphql(/* GraphQL */ `
     id
     name
     spanAttributes
+    resourceAttributes
     parentId
     startTime
     endTime

From 4b1f8d4d48b7a8a9d86e46d7f3cf19cbca8db3a7 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 26 Jun 2025 13:02:51 +0200
Subject: [PATCH 024/123] subgraph execute

---
 configs/gateway.config.ts                     |   3 +-
 .../src/clickhouse-actions/015-otel-trace.ts  | 148 +++++++++---------
 2 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
index 597a061870..d44d5fa2c8 100644
--- a/configs/gateway.config.ts
+++ b/configs/gateway.config.ts
@@ -172,8 +172,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
 
       // add hive branded attributes
       //
-      span.attributes['hive.graphql.subgraph.name'] =
-        span.attributes['gateway.upstream.subgraph.name'];
+      span.attributes['hive.subgraph.name'] = span.attributes['gateway.upstream.subgraph.name'];
       span.attributes['hive.graphql.operation.document'] = span.attributes['graphql.document'];
       span.attributes['hive.graphql.operation.name'] = span.attributes['graphql.operation.name'];
       span.attributes['hive.graphql.operation.type'] = span.attributes['graphql.operation.type'];
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 4af6ea74b0..efd37a2c65 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -178,79 +178,79 @@ export const action: Action = async exec => {
 
   // These can be used for dedicated subgraph views
 
-  // await exec(`
-  //   CREATE TABLE IF NOT EXISTS "otel_subgraph_spans" (
-  //     "target_id" LowCardinality(String) CODEC(ZSTD(1))
-  //     , "subgraph_name" String CODEC(ZSTD(1))
-  //     , "trace_id" String CODEC(ZSTD(1))
-  //     , "span_id" String CODEC(ZSTD(1))
-  //     , "timestamp" DateTime('UTC') CODEC(DoubleDelta, LZ4)
-  //     , "duration" UInt64 CODEC(T64, ZSTD(1))
-  //     , "http_status_code" String CODEC(ZSTD(1))
-  //     , "http_method" String CODEC(ZSTD(1))
-  //     , "http_host" String CODEC(ZSTD(1))
-  //     , "http_route" String CODEC(ZSTD(1))
-  //     , "http_url" String CODEC(ZSTD(1))
-  //     , "graphql_operation_name" String CODEC(ZSTD(1))
-  //     , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
-  //     , "graphql_operation_document" String CODEC(ZSTD(1))
-  //     , "graphql_error_count" UInt32 CODEC(T64, ZSTD(1))
-  //     , "graphql_error_codes" Array(LowCardinality(String)) CODEC(ZSTD(1))
-  //   )
-  //   ENGINE = MergeTree
-  //   PARTITION BY toDate("timestamp")
-  //   ORDER BY ("target_id", "subgraph_name", "timestamp")
-  //   TTL toDateTime(timestamp) + toIntervalDay(365)
-  //   SETTINGS
-  //     index_granularity = 8192
-  //     , ttl_only_drop_parts = 1
-  // `);
+  await exec(`
+    CREATE TABLE IF NOT EXISTS "otel_subgraph_spans" (
+      "target_id" LowCardinality(String) CODEC(ZSTD(1))
+      , "subgraph_name" String CODEC(ZSTD(1))
+      , "trace_id" String CODEC(ZSTD(1))
+      , "span_id" String CODEC(ZSTD(1))
+      , "timestamp" DateTime('UTC') CODEC(DoubleDelta, LZ4)
+      , "duration" UInt64 CODEC(T64, ZSTD(1))
+      , "http_status_code" String CODEC(ZSTD(1))
+      , "http_method" String CODEC(ZSTD(1))
+      , "http_host" String CODEC(ZSTD(1))
+      , "http_route" String CODEC(ZSTD(1))
+      , "http_url" String CODEC(ZSTD(1))
+      , "graphql_operation_name" String CODEC(ZSTD(1))
+      , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
+      , "graphql_operation_document" String CODEC(ZSTD(1))
+      , "graphql_error_count" UInt32 CODEC(T64, ZSTD(1))
+      , "graphql_error_codes" Array(LowCardinality(String)) CODEC(ZSTD(1))
+    )
+    ENGINE = MergeTree
+    PARTITION BY toDate("timestamp")
+    ORDER BY ("target_id", "subgraph_name", "timestamp")
+    TTL toDateTime(timestamp) + toIntervalDay(365)
+    SETTINGS
+      index_granularity = 8192
+      , ttl_only_drop_parts = 1
+  `);
 
-  // await exec(`
-  //   CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_subgraph_spans_mv" TO "otel_subgraph_spans" (
-  //     "target_id" LowCardinality(String)
-  //     , "subgraph_name" Array(String)
-  //     , "trace_id" String
-  //     , "span_id" String
-  //     , "timestamp" DateTime('UTC')
-  //     , "duration" UInt64
-  //     , "http_status_code" String
-  //     , "http_host" String
-  //     , "http_method" String
-  //     , "http_route" String
-  //     , "http_url" String
-  //     , "client_name" String
-  //     , "client_version" String
-  //     , "graphql_operation_name" String
-  //     , "graphql_operation_type" LowCardinality(String)
-  //     , "graphql_operation_document" String
-  //     , "graphql_error_count" UInt32
-  //     , "graphql_error_codes" Array(LowCardinality(String))
-  //   )
-  //   AS (
-  //     SELECT
-  //       toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
-  //       , "SpanAttributes"['hive.graphql.subgraph.name'] AS "subgraph_name"
-  //       , "TraceId" as "trace_id"
-  //       , "SpanId" AS "span_id"
-  //       , toDateTime("Timestamp", 'UTC') AS "timestamp"
-  //       , "Duration" AS "duration"
-  //       , "SpanAttributes"['http.status_code'] AS "http_status_code"
-  //       , "SpanAttributes"['http.host'] AS "http_host"
-  //       , "SpanAttributes"['http.method'] AS "http_method"
-  //       , "SpanAttributes"['http.route'] AS "http_route"
-  //       , "SpanAttributes"['http.url'] AS "http_url"
-  //       , "SpanAttributes"['hive.client.name'] AS "client_name"
-  //       , "SpanAttributes"['hive.client.version'] AS "client_version"
-  //       , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
-  //       , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
-  //       , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
-  //       , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
-  //       , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
-  //     FROM
-  //       "otel_traces"
-  //     WHERE
-  //       startsWith("SpanName", 'subgraph.execute')
-  //   )
-  // `);
+  await exec(`
+    CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_subgraph_spans_mv" TO "otel_subgraph_spans" (
+      "target_id" LowCardinality(String)
+      , "subgraph_name" Array(String)
+      , "trace_id" String
+      , "span_id" String
+      , "timestamp" DateTime('UTC')
+      , "duration" UInt64
+      , "http_status_code" String
+      , "http_host" String
+      , "http_method" String
+      , "http_route" String
+      , "http_url" String
+      , "client_name" String
+      , "client_version" String
+      , "graphql_operation_name" String
+      , "graphql_operation_type" LowCardinality(String)
+      , "graphql_operation_document" String
+      , "graphql_error_count" UInt32
+      , "graphql_error_codes" Array(LowCardinality(String))
+    )
+    AS (
+      SELECT
+        toLowCardinality("SpanAttributes"['hive.target_id']) AS "target_id"
+        , "SpanAttributes"['hive.graphql.subgraph.name'] AS "subgraph_name"
+        , "TraceId" as "trace_id"
+        , "SpanId" AS "span_id"
+        , toDateTime("Timestamp", 'UTC') AS "timestamp"
+        , "Duration" AS "duration"
+        , "SpanAttributes"['http.status_code'] AS "http_status_code"
+        , "SpanAttributes"['http.host'] AS "http_host"
+        , "SpanAttributes"['http.method'] AS "http_method"
+        , "SpanAttributes"['http.route'] AS "http_route"
+        , "SpanAttributes"['http.url'] AS "http_url"
+        , "SpanAttributes"['hive.client.name'] AS "client_name"
+        , "SpanAttributes"['hive.client.version'] AS "client_version"
+        , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
+        , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
+        , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
+        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
+      FROM
+        "otel_traces"
+      WHERE
+        startsWith("SpanName", 'subgraph.execute')
+    )
+  `);
 };

From 7a5606213d2a1d08e89188f9f3524fcfa05359f4 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 26 Jun 2025 14:38:13 +0200
Subject: [PATCH 025/123] this seems more smart

---
 configs/gateway.config.ts                                   | 6 +++---
 .../migrations/src/clickhouse-actions/015-otel-trace.ts     | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
index d44d5fa2c8..2272079ce5 100644
--- a/configs/gateway.config.ts
+++ b/configs/gateway.config.ts
@@ -77,7 +77,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
     const traceId = spanContext.traceId;
     const spanId = spanContext.spanId;
 
-    console.log(traceId, spanId);
+    console.log(traceId, spanId, span.name);
 
     // Initialize trace data structures if needed
     if (!this.activeSpans.has(traceId)) {
@@ -137,7 +137,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
             rootSpan.setAttribute('hive.graphql.operation.type', operationType);
             rootSpan.setAttribute('hive.graphql.operation.name', operationName ?? '');
             rootSpan.setAttribute('hive.graphql.operation.document', document);
-            rootSpan.setAttribute('hive.graphql.error.count', String(errorCount ?? 0));
+            rootSpan.setAttribute('hive.graphql.error.count', errorCount ?? 0);
 
             // Add the subgraph names as a comma-separated list
             if (subgraphNamesForTrace && subgraphNamesForTrace.size > 0) {
@@ -178,7 +178,7 @@ class HiveTracingSpanProcessor implements SpanProcessor {
       span.attributes['hive.graphql.operation.type'] = span.attributes['graphql.operation.type'];
       // TODO: attributes for error codes
       // hive.graphql.error.count
-      span.attributes['hive.graphql.error.count'] = '0';
+      // span.attributes['hive.graphql.error.count'] = 0;
       // hive.graphql.error.codes
       // span.setAttribute('hive.graphql.error.codes', '');
       //
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index efd37a2c65..dc0be2d88f 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -166,7 +166,7 @@ export const action: Action = async exec => {
         , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
-        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
+        , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
       FROM
@@ -245,7 +245,7 @@ export const action: Action = async exec => {
         , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
-        , "SpanAttributes"['hive.graphql.error.count'] AS "graphql_error_count"
+        , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
         , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
       FROM
         "otel_traces"

From 7f55c085df1ad6bcb960cb2df1ed4678ddf18990 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 27 Jun 2025 09:52:18 +0200
Subject: [PATCH 026/123] wip

---
 packages/web/app/src/pages/target-trace.tsx   |   2 +-
 .../app/src/pages/target-traces-filter.tsx    | 553 ------------------
 .../web/app/src/pages/target-traces-width.tsx |  49 --
 packages/web/app/src/pages/target-traces.tsx  |   4 +-
 4 files changed, 3 insertions(+), 605 deletions(-)
 delete mode 100644 packages/web/app/src/pages/target-traces-filter.tsx
 delete mode 100644 packages/web/app/src/pages/target-traces-width.tsx

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 0e264005c2..eb47edb007 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -33,7 +33,7 @@ import { FragmentType, graphql, useFragment } from '@/gql';
 import { useClipboard } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
 import { Link, useNavigate } from '@tanstack/react-router';
-import { useWidthSync, WidthSyncProvider } from './target-traces-width';
+import { useWidthSync, WidthSyncProvider } from './traces/target-traces-width';
 
 const rootTraceColor = 'rgb(244, 183, 64)';
 
diff --git a/packages/web/app/src/pages/target-traces-filter.tsx b/packages/web/app/src/pages/target-traces-filter.tsx
deleted file mode 100644
index 0299ca3d3c..0000000000
--- a/packages/web/app/src/pages/target-traces-filter.tsx
+++ /dev/null
@@ -1,553 +0,0 @@
-import {
-  ChangeEventHandler,
-  ComponentPropsWithoutRef,
-  ElementRef,
-  forwardRef,
-  Fragment,
-  InputHTMLAttributes,
-  memo,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import { addDays, formatDate } from 'date-fns';
-import debounce from 'lodash.debounce';
-import {
-  CalendarIcon,
-  CheckIcon,
-  ChevronRightIcon,
-  CircleXIcon,
-  MinusIcon,
-  PlusIcon,
-} from 'lucide-react';
-import type { DateRange } from 'react-day-picker';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Calendar } from '@/components/ui/calendar';
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarSeparator,
-} from '@/components/ui/sidebar';
-import { formatNumber } from '@/lib/hooks';
-import { cn } from '@/lib/utils';
-import * as SliderPrimitive from '@radix-ui/react-slider';
-
-interface FilterInputProps extends InputHTMLAttributes<HTMLInputElement> {}
-
-export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-
-export function FilterLocalSearch(props: { value: string; onChange(value: string): void }) {
-  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    props.onChange(e.target.value);
-  }, []);
-
-  return (
-    <div className="mt-4 flex w-full max-w-sm items-center space-x-2">
-      <FilterInput
-        type="text"
-        placeholder="Search values"
-        value={props.value}
-        onChange={handleChange}
-      />
-    </div>
-  );
-}
-
-export function FilterTitle(props: { children: ReactNode; changes?: number; onReset(): void }) {
-  return (
-    <SidebarGroupLabel
-      asChild
-      className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
-    >
-      <CollapsibleTrigger>
-        <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
-        {props.children}
-        {props.changes ? (
-          <Button
-            variant="secondary"
-            size="sm"
-            className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
-            onClick={e => {
-              e.preventDefault();
-              props.onReset();
-            }}
-            asChild
-          >
-            <div>
-              <CircleXIcon className="hidden size-3 group-hover:block" />
-              <span className="block group-hover:hidden">{props.changes}</span>
-            </div>
-          </Button>
-        ) : null}
-      </CollapsibleTrigger>
-    </SidebarGroupLabel>
-  );
-}
-
-export function FilterContent(props: { children: ReactNode }) {
-  return (
-    <CollapsibleContent>
-      <SidebarGroupContent>
-        <SidebarMenu>{props.children}</SidebarMenu>
-      </SidebarGroupContent>
-    </CollapsibleContent>
-  );
-}
-
-export const MultiInputFilter = memo(
-  (props: {
-    name: string;
-    /**
-     * Filter's key for the backend and url state
-     */
-    key: string;
-    selectedValues: string[];
-    onChange(selectedValues: string[]): void;
-  }) => {
-    const [traceId, setTraceId] = useState('');
-    const handleTraceIdChange = useCallback(
-      (e: React.ChangeEvent<HTMLInputElement>) => {
-        setTraceId(e.target.value);
-      },
-      [setTraceId],
-    );
-
-    const addTraceId = useCallback(() => {
-      if (!traceId) {
-        return;
-      }
-
-      if (!props.selectedValues.includes(traceId)) {
-        props.onChange(props.selectedValues.concat(traceId));
-      }
-
-      setTraceId('');
-    }, [traceId, setTraceId]);
-
-    return (
-      <Filter name={props.name}>
-        <FilterTitle
-          changes={props.selectedValues.length}
-          children={props.name}
-          onReset={() => props.onChange([])}
-        />
-        <FilterContent>
-          <form
-            className="mt-4 flex w-full max-w-sm items-center space-x-2"
-            onSubmit={e => {
-              e.preventDefault();
-              addTraceId();
-            }}
-          >
-            <FilterInput
-              type="text"
-              placeholder="Trace ID..."
-              value={traceId}
-              onChange={handleTraceIdChange}
-            />
-            <Button
-              variant="secondary"
-              className="h-9 w-9 p-0"
-              type="submit"
-              onClick={() => {
-                addTraceId();
-              }}
-            >
-              <PlusIcon className="size-4" />
-            </Button>
-          </form>
-          {props.selectedValues.map(value => (
-            <SidebarMenuButton
-              key={value}
-              onClick={() => props.onChange(props.selectedValues.filter(val => val !== value))}
-              className="group/trace-id hover:bg-sidebar-accent/50"
-            >
-              <div
-                data-active
-                className="text-sidebar-primary-foreground border-sidebar-primary bg-sidebar-primary group-hover/trace-id:border-sidebar-border flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border group-hover/trace-id:bg-transparent"
-              >
-                <CheckIcon className="block size-3 group-hover/trace-id:hidden" />
-                <MinusIcon className="hidden size-3 group-hover/trace-id:block" />
-              </div>
-              {value}
-            </SidebarMenuButton>
-          ))}
-        </FilterContent>
-      </Filter>
-    );
-  },
-);
-
-export const MultiSelectFilter = memo(function <$Value>(props: {
-  name: string;
-  /**
-   * Filter's key for the backend and url state
-   */
-  key: string;
-  hideSearch?: boolean;
-  options: Array<{
-    /**
-     * How often it occurs
-     */
-    count: number;
-    /**
-     * What to display
-     */
-    label: ReactNode;
-    /**
-     * What to use when searching
-     */
-    searchContent: string;
-    /**
-     * A value to use when the filter is selected
-     */
-    value: $Value;
-  }>;
-  selectedValues: $Value[];
-  onChange(selectedValues: $Value[]): void;
-}) {
-  const [searchPhrase, setSearchPhrase] = useState('');
-  const filteredOptions = useMemo(() => {
-    const lowerSearchPhrase = searchPhrase.toLowerCase().trim();
-
-    if (!lowerSearchPhrase) {
-      return props.options;
-    }
-
-    return props.options.filter(option =>
-      option.searchContent.toLowerCase().includes(lowerSearchPhrase),
-    );
-  }, [searchPhrase, props.options]);
-
-  return (
-    <Filter name={props.name}>
-      <FilterTitle
-        changes={props.selectedValues.length}
-        children={props.name}
-        onReset={() => props.onChange([])}
-      />
-      <FilterContent>
-        {!props.hideSearch && <FilterLocalSearch value={searchPhrase} onChange={setSearchPhrase} />}
-        {filteredOptions.map((option, index) => (
-          <FilterOption
-            key={index}
-            selected={props.selectedValues.includes(option.value)}
-            count={option.count}
-            onClick={() => {
-              if (props.selectedValues.includes(option.value)) {
-                props.onChange(props.selectedValues.filter(val => val !== option.value));
-              } else {
-                props.onChange(props.selectedValues.concat(option.value));
-              }
-            }}
-          >
-            {option.label}
-          </FilterOption>
-        ))}
-      </FilterContent>
-    </Filter>
-  );
-});
-
-function FilterOption(props: {
-  onClick(): void;
-  selected: boolean;
-  children: ReactNode;
-  count?: number;
-}) {
-  return (
-    <SidebarMenuButton
-      onClick={props.onClick}
-      className="hover:bg-sidebar-accent/50 flex-row items-center justify-between"
-    >
-      <div className="flex items-center gap-2 overflow-hidden">
-        <div
-          data-active={props.selected}
-          className="group/filter-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
-        >
-          <CheckIcon className="hidden size-3 group-data-[active=true]/filter-item:block" />
-        </div>
-        {props.children}
-      </div>
-      {props.count ? (
-        <Badge variant="secondary" className="rounded-sm px-1 font-mono font-normal">
-          {formatNumber(props.count)}
-        </Badge>
-      ) : null}
-    </SidebarMenuButton>
-  );
-}
-
-function Filter(props: { name: string; children: ReactNode }) {
-  return (
-    <Fragment key={props.name}>
-      <SidebarGroup key={props.name} className="py-0">
-        <Collapsible className="group/collapsible">{props.children}</Collapsible>
-      </SidebarGroup>
-      <SidebarSeparator className="mx-0" />
-    </Fragment>
-  );
-}
-
-const DoubleSlider = forwardRef<
-  ElementRef<typeof SliderPrimitive.Root>,
-  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn('relative flex w-full touch-none select-none items-center', className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-800">
-      <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
-    </SliderPrimitive.Track>
-    {props.value?.map((_, index) => (
-      <SliderPrimitive.Thumb
-        key={index}
-        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
-      />
-    ))}
-  </SliderPrimitive.Root>
-));
-
-export const DurationFilter = memo(
-  (props: { value: [number, number] | []; onChange(value: [number, number]): void }) => {
-    const minValue = 0;
-    const maxValue = 100000;
-    const defaultValues: [number, number] = [minValue, maxValue];
-    const [values, setValues] = useState<[number, number]>(
-      props.value.length ? props.value : defaultValues,
-    );
-
-    const handleStateChange = useMemo(
-      () =>
-        debounce((newValues: [number, number]) => {
-          props.onChange(newValues);
-        }, 1000),
-      [props.onChange],
-    );
-
-    const handleSliderChange = useCallback(
-      (newValues: [number, number]) => {
-        handleStateChange(newValues);
-        setValues(newValues);
-      },
-      [handleStateChange, setValues],
-    );
-
-    useEffect(() => {
-      return () => handleStateChange.cancel();
-    }, [handleStateChange]);
-
-    const handleInputChange = useCallback(
-      (index: number, value: string) => {
-        const numValue = Number.parseInt(value) || minValue;
-        const newValues: [number, number] = [...values];
-        newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
-
-        handleStateChange(newValues);
-        setValues(newValues);
-      },
-      [handleStateChange, setValues],
-    );
-
-    const handleMinInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-      e => handleInputChange(0, e.target.value),
-      [handleInputChange],
-    );
-
-    const handleMaxInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-      e => handleInputChange(1, e.target.value),
-      [handleInputChange],
-    );
-
-    return (
-      <Filter name="Duration">
-        <FilterTitle
-          changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
-          children={'Duration'}
-          onReset={() => props.onChange(defaultValues)}
-        />
-        <FilterContent>
-          <div className="space-y-6 p-2">
-            <div className="space-y-2">
-              <div className="space-y-1">
-                <label className="font-mono text-xs text-zinc-400">MIN</label>
-                <div className="relative">
-                  <FilterInput
-                    type="number"
-                    value={values[0]}
-                    onChange={handleMinInputChange}
-                    className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
-                  />
-                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
-                    ms
-                  </span>
-                </div>
-              </div>
-              <div className="space-y-1">
-                <label className="font-mono text-xs text-zinc-400">MAX</label>
-                <div className="relative">
-                  <FilterInput
-                    type="number"
-                    value={values[1]}
-                    onChange={handleMaxInputChange}
-                    className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
-                  />
-                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
-                    ms
-                  </span>
-                </div>
-              </div>
-            </div>
-            <DoubleSlider
-              defaultValue={defaultValues}
-              max={maxValue}
-              min={minValue}
-              step={1}
-              value={values}
-              onValueChange={handleSliderChange}
-              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
-            />
-          </div>
-        </FilterContent>
-      </Filter>
-    );
-  },
-);
-
-export const TimelineFilter = memo(() => {
-  const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
-  const [dateRange, setDateRange] = useState<DateRange | undefined>({
-    from: addDays(new Date(), -3),
-    to: new Date(),
-  });
-
-  const formatted = useMemo(() => {
-    if (!dateRange?.from || !dateRange.to || selectedPreset !== 'custom') {
-      return 'Select time period';
-    }
-
-    const fromDate = formatDate(dateRange.from, 'MMM d');
-    const fromTime = formatDate(dateRange.from, 'HH:mm');
-    const toDate = formatDate(dateRange.to, 'MMM d');
-    const toTime = formatDate(dateRange.to, 'HH:mm');
-
-    if (fromDate === toDate) {
-      return `${fromDate}, ${fromTime} - ${toTime}`;
-    }
-
-    return `${fromDate}, ${fromTime} - ${toDate}, ${toTime}`;
-  }, [dateRange, selectedPreset]);
-
-  return (
-    <Filter name="Timeline">
-      <FilterTitle changes={0} children={'Timeline'} onReset={() => {}} />
-      <FilterContent>
-        <div className="space-y-2 p-2">
-          <Select value={selectedPreset ?? undefined} onValueChange={setSelectedPreset}>
-            <SelectTrigger className="bg-background w-full">
-              <SelectValue placeholder="Select time period" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="last-5min">Last 5 minutes</SelectItem>
-              <SelectItem value="last-1h">Last 1 hour</SelectItem>
-              <SelectItem value="last-3h">Last 3 hours</SelectItem>
-              <SelectItem value="last-12h">Last 12 hours</SelectItem>
-              <SelectItem value="last-24h">Last 24 hours</SelectItem>
-              <SelectItem value="custom">Custom</SelectItem>
-            </SelectContent>
-          </Select>
-          {selectedPreset === 'custom' ? (
-            <>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" className="w-full justify-start px-2 text-left">
-                    <CalendarIcon className="mr-2 size-4" />{' '}
-                    <span className="text-xs">{formatted}</span>
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="center">
-                  <Calendar
-                    initialFocus
-                    mode="range"
-                    defaultMonth={dateRange?.from}
-                    selected={dateRange}
-                    onSelect={setDateRange}
-                    numberOfMonths={1}
-                    className="p-2 pb-0"
-                  />
-                  <div className="border-border mt-4 space-y-2 border-t p-2">
-                    <div>
-                      <Label className="text-sm font-normal text-gray-500">Start</Label>
-                      <div className="flex items-center gap-x-2">
-                        <Input
-                          className="h-8 w-[152px] py-0"
-                          value={dateRange?.from ? formatDate(dateRange.from, 'yyyy-MM-dd') : ''}
-                        />
-                        <Input
-                          className="h-8 w-16 py-0"
-                          value={dateRange?.from ? formatDate(dateRange.from, 'HH:mm') : ''}
-                        />
-                      </div>
-                    </div>
-                    <div>
-                      <Label className="text-sm font-normal text-gray-500">End</Label>
-                      <div className="flex items-center gap-x-2">
-                        <Input
-                          className="h-8 w-[152px] py-0"
-                          value={dateRange?.to ? formatDate(dateRange.to, 'yyyy-MM-dd') : ''}
-                        />
-                        <Input
-                          className="h-8 w-16 py-0"
-                          value={dateRange?.to ? formatDate(dateRange.to, 'HH:mm') : ''}
-                        />
-                      </div>
-                    </div>
-                    <Button variant="outline" size="sm" className="w-full">
-                      <span className="relative">
-                        Apply
-                        <span className="absolute top-[4px] ml-2 text-xs">↵</span>
-                      </span>
-                    </Button>
-                  </div>
-                </PopoverContent>
-              </Popover>
-            </>
-          ) : null}
-        </div>
-      </FilterContent>
-    </Filter>
-  );
-});
diff --git a/packages/web/app/src/pages/target-traces-width.tsx b/packages/web/app/src/pages/target-traces-width.tsx
deleted file mode 100644
index 5fec558a37..0000000000
--- a/packages/web/app/src/pages/target-traces-width.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { createContext, FC, ReactNode, useCallback, useContext, useRef, useState } from 'react';
-
-interface WidthSyncContextType {
-  width: number;
-  updateWidth: (newWidth: number) => void;
-}
-
-const WidthSyncContext = createContext<WidthSyncContextType | null>(null);
-
-interface WidthSyncProviderProps {
-  children: ReactNode;
-  defaultWidth: number;
-}
-
-export const WidthSyncProvider: FC<WidthSyncProviderProps> = props => {
-  const [width, setWidth] = useState<number>(props.defaultWidth);
-  // Throttle state to avoid too many updates during slider dragging
-  const throttleTimerRef = useRef<number | null>(null);
-
-  // Ensure width stays within bounds and apply to all registered components
-  const handleSetWidth = useCallback((newWidth: number) => {
-    // Clear any existing throttle timer
-    if (throttleTimerRef.current !== null) {
-      window.cancelAnimationFrame(throttleTimerRef.current);
-    }
-
-    // Use requestAnimationFrame for smoother updates
-    throttleTimerRef.current = window.requestAnimationFrame(() => {
-      const boundedWidth = newWidth;
-      setWidth(boundedWidth);
-
-      throttleTimerRef.current = null;
-    });
-  }, []);
-
-  return (
-    <WidthSyncContext.Provider value={{ width, updateWidth: handleSetWidth }}>
-      {props.children}
-    </WidthSyncContext.Provider>
-  );
-};
-
-export const useWidthSync = () => {
-  const context = useContext(WidthSyncContext);
-  if (!context) {
-    throw new Error('useWidthSync must be used within a WidthSyncProvider');
-  }
-  return [context.width, context.updateWidth] as const;
-};
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 5e73ca6ef3..4138c6df98 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -60,8 +60,8 @@ import {
   MultiInputFilter,
   MultiSelectFilter,
   TimelineFilter,
-} from './target-traces-filter';
-import { useWidthSync, WidthSyncProvider } from './target-traces-width';
+} from './traces/target-traces-filter';
+import { useWidthSync, WidthSyncProvider } from './traces/target-traces-width';
 
 const rootSpan: SpanProps = {
   id: 'root',

From 59f33bf8eed1a55328d228db2fea1d0940602645 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 13:05:29 +0200
Subject: [PATCH 027/123] filter based on duration and period

---
 .../src/modules/operations/module.graphql.ts  |  13 +
 .../operations/providers/operations-reader.ts |   2 +-
 .../modules/operations/providers/traces.ts    | 113 +--
 .../modules/operations/resolvers/Target.ts    |  10 +-
 .../src/components/ui/date-range-picker.tsx   |  18 +-
 packages/web/app/src/lib/date-math.ts         |  31 +-
 packages/web/app/src/pages/target-traces.tsx  |  39 +-
 .../src/pages/traces/target-traces-filter.tsx | 672 ++++++++++++++++++
 .../src/pages/traces/target-traces-width.tsx  |  49 ++
 9 files changed, 869 insertions(+), 78 deletions(-)
 create mode 100644 packages/web/app/src/pages/traces/target-traces-filter.tsx
 create mode 100644 packages/web/app/src/pages/traces/target-traces-width.tsx

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index ba54860ca3..09d419e5c1 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -300,7 +300,20 @@ export default gql`
     spanAttributes: JSONObject!
   }
 
+  input DurationInput {
+    min: SafeInt
+    max: SafeInt
+  }
+
   input TracesFilterInput {
+    """
+    Time range filter for the traces.
+    """
+    period: DateRangeInput
+    """
+    Duration filter for the traces.
+    """
+    duration: DurationInput
     id: [ID!]
     operationName: [String!]
     operationType: [GraphQLOperationType!]
diff --git a/packages/services/api/src/modules/operations/providers/operations-reader.ts b/packages/services/api/src/modules/operations/providers/operations-reader.ts
index 5b2d94b56d..ba8235bbb0 100644
--- a/packages/services/api/src/modules/operations/providers/operations-reader.ts
+++ b/packages/services/api/src/modules/operations/providers/operations-reader.ts
@@ -18,7 +18,7 @@ const CoordinateClientNamesGroupModel = z.array(
   }),
 );
 
-function formatDate(date: Date): string {
+export function formatDate(date: Date): string {
   return format(addMinutes(date, date.getTimezoneOffset()), 'yyyy-MM-dd HH:mm:ss');
 }
 
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index a573b61462..9a274f914b 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -1,8 +1,10 @@
 import { Injectable } from 'graphql-modules';
 import { z } from 'zod';
-import { batch } from '@hive/api/shared/helpers';
+import { batch, parseDateRangeInput } from '@hive/api/shared/helpers';
+import * as GraphQLSchema from '../../../__generated__/types';
 import { Logger } from '../../shared/providers/logger';
 import { ClickHouse, sql } from './clickhouse-client';
+import { formatDate } from './operations-reader';
 import { SqlValue } from './sql';
 
 @Injectable({
@@ -90,6 +92,11 @@ export class Traces {
     targetId: string,
     first: number | null,
     filter: {
+      period: null | GraphQLSchema.DateRangeInput;
+      duration: {
+        min: number | null;
+        max: number | null;
+      } | null;
       id?: Array<string>;
       success?: Array<boolean>;
       operationName?: Array<string>;
@@ -107,59 +114,77 @@ export class Traces {
 
     const ANDs: SqlValue[] = [sql`target_id = ${targetId}`];
 
-    if (filter?.id?.length) {
-      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
-    }
-
-    if (filter?.success?.length) {
-      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
+    if (filter?.period) {
+      const period = parseDateRangeInput(filter.period);
       ANDs.push(
-        sql`${sql.join(
-          filter.success.map(ok =>
-            ok
-              ? // 2XX
-                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
-              : // non-2XXX
-                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
-          ),
-          ' OR ',
-        )}`,
+        sql`"otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(period.from)}, 'UTC')`,
       );
-    }
-
-    if (filter?.operationName?.length) {
-      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
-    }
-
-    if (filter?.operationType?.length) {
-      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
-    }
-
-    if (filter?.subgraphs?.length) {
-      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
-    }
-
-    if (filter?.httpStatusCode?.length) {
       ANDs.push(
-        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+        sql`"otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(period.to)}, 'UTC')`,
       );
     }
 
-    if (filter?.httpMethod?.length) {
-      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    if (filter?.duration?.min) {
+      ANDs.push(sql`"duration" >= ${String(filter.duration.min * 1_000 * 1_000)}`);
     }
 
-    if (filter?.httpHost?.length) {
-      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    if (filter?.duration?.max) {
+      ANDs.push(sql`"duration" <= ${String(filter.duration.max * 1_000 * 1_000)}`);
     }
 
-    if (filter?.httpRoute?.length) {
-      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
-    }
-
-    if (filter?.httpUrl?.length) {
-      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
-    }
+    // if (filter?.id?.length) {
+    //   ANDs.push(sql`"trace_id" IN (${sql.array(filter.id, 'String')})`);
+    // }
+
+    // if (filter?.success?.length) {
+    //   // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
+    //   ANDs.push(
+    //     sql`${sql.join(
+    //       filter.success.map(ok =>
+    //         ok
+    //           ? // 2XX
+    //             sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
+    //           : // non-2XXX
+    //             sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
+    //       ),
+    //       ' OR ',
+    //     )}`,
+    //   );
+    // }
+
+    // if (filter?.operationName?.length) {
+    //   ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
+    // }
+
+    // if (filter?.operationType?.length) {
+    //   ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
+    // }
+
+    // if (filter?.subgraphs?.length) {
+    //   ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
+    // }
+
+    // if (filter?.httpStatusCode?.length) {
+    //   ANDs.push(
+    //     sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+    //   );
+    // }
+
+    // if (filter?.httpMethod?.length) {
+    //   ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    // }
+
+    // if (filter?.httpHost?.length) {
+    //   ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    // }
+
+    // if (filter?.httpRoute?.length) {
+    //   ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
+    // }
+
+    // if (filter?.httpUrl?.length) {
+    //   ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
+    // }
 
     const tracesQuery = await clickhouse.query<unknown>({
       query: sql`
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index a0c27b5c56..dcb491d77f 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -77,7 +77,15 @@ export const Target: Pick<
     };
   },
   traces: async (target, { first, filter }, { injector }) => {
-    return injector.get(Traces).findTracesForTargetId(target.id, first ?? null, filter);
+    return injector.get(Traces).findTracesForTargetId(target.id, first ?? null, {
+      period: filter?.period ?? null,
+      duration: filter?.duration
+        ? {
+            min: filter.duration.min ?? null,
+            max: filter.duration.max ?? null,
+          }
+        : null,
+    });
   },
   tracesFilterOptions: async (_parent, { filter }, { injector }) => {
     const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index 0ff64043bf..f8c2d52975 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -99,7 +99,10 @@ export const availablePresets: Preset[] = [
   { name: 'last1y', label: 'Last 1 year', range: { from: 'now-364d', to: 'now' } },
 ];
 
-function findMatchingPreset(range: Preset['range']): Preset | undefined {
+export function findMatchingPreset(
+  range: Preset['range'],
+  availablePresets: Preset[],
+): Preset | undefined {
   return availablePresets.find(preset => {
     return preset.range.from === range.from && preset.range.to === range.to;
   });
@@ -144,7 +147,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
       !hasInvalidUnitRegex?.test(props.selectedRange.from) &&
       !hasInvalidUnitRegex?.test(props.selectedRange.to)
     ) {
-      preset = findMatchingPreset(props.selectedRange);
+      preset = findMatchingPreset(props.selectedRange, presets);
 
       if (preset) {
         return preset;
@@ -374,10 +377,13 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                     if (resolvedRange) {
                       setActivePreset(
                         () =>
-                          findMatchingPreset({
-                            from: fromWithoutWhitespace,
-                            to: toWithoutWhitespace,
-                          }) ?? {
+                          findMatchingPreset(
+                            {
+                              from: fromWithoutWhitespace,
+                              to: toWithoutWhitespace,
+                            },
+                            availablePresets,
+                          ) ?? {
                             name: `${fromWithoutWhitespace}_${toWithoutWhitespace}`,
                             label: buildDateRangeString(resolvedRange),
                             range: { from: fromWithoutWhitespace, to: toWithoutWhitespace },
diff --git a/packages/web/app/src/lib/date-math.ts b/packages/web/app/src/lib/date-math.ts
index 64d0b66a75..36dda8ae0a 100644
--- a/packages/web/app/src/lib/date-math.ts
+++ b/packages/web/app/src/lib/date-math.ts
@@ -2,7 +2,7 @@
  * The original source code was taken from Grafana's date-math.ts file and adjusted for Hive needs.
  * @source https://github.com/grafana/grafana/blob/411c89012febe13323e4b8aafc8d692f4460e680/packages/grafana-data/src/datetime/datemath.ts#L1C1-L208C2
  */
-import { add, format, formatISO, parse as parseDate, sub, type Duration } from 'date-fns';
+import { add, format, formatISO, parse as parseDate, parseISO, sub, type Duration } from 'date-fns';
 import { z } from 'zod';
 import { UTCDate } from '@date-fns/utc';
 
@@ -46,16 +46,8 @@ export function formatDateToString(date: Date) {
   return format(date, dateStringFormat);
 }
 
-function isValidDateString(input: string) {
-  return input.length === 10 && parseDateString(input) !== undefined;
-}
-
 /**
- * Parses different types input to a moment instance. There is a specific formatting language that can be used
- * if text arg is string. See unit tests for examples.
- * @param text
- * @param roundUp See parseDateMath function.
- * @param timezone Only string 'utc' is acceptable here, for anything else, local timezone is used.
+ * Parse a time iso string or formular into an actual date
  */
 export function parse(text: string, now = new UTCDate()): Date | undefined {
   if (!text) {
@@ -65,18 +57,29 @@ export function parse(text: string, now = new UTCDate()): Date | undefined {
   let mathString = '';
 
   if (text.substring(0, 3) === 'now') {
-    // time = dateTimeForTimeZone(timezone);
     mathString = text.substring('now'.length);
-  } else if (isValidDateString(text)) {
-    return parseDateString(text);
   } else {
-    return undefined;
+    // yyyy-MM-dd
+    const date = parseDateString(text);
+
+    if (date && !isNaN(date?.getTime())) {
+      return date;
+    }
+
+    // ISO
+    const isoDate = parseISO(text);
+
+    if (isoDate && !isNaN(isoDate?.getTime())) {
+      return isoDate;
+    }
   }
 
   if (!mathString.length) {
     return now;
   }
 
+  // formular
+
   return parseDateMath(mathString, now);
 }
 
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 4138c6df98..794b13e76e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -55,6 +55,7 @@ import {
   OnChangeFn,
   useReactTable,
 } from '@tanstack/react-table';
+import * as dateMath from '../lib/date-math';
 import {
   DurationFilter,
   MultiInputFilter,
@@ -838,8 +839,9 @@ function LabelWithBadge(props: {
 }
 
 export const TargetTracesFilterState = z.object({
-  'trace.id': z.array(z.string()).default([]),
+  period: z.union([z.tuple([z.string(), z.string()]), z.tuple([])]).default([]),
   duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
+  'trace.id': z.array(z.string()).default([]),
   'graphql.status': z.array(z.string()).default([]),
   'graphql.kind': z.array(z.string()).default([]),
   'graphql.subgraph': z.array(z.string()).default([]),
@@ -1148,7 +1150,7 @@ function Filters(
           </Button>
         ) : null}
       </SidebarGroupLabel>
-      <TimelineFilter />
+      <TimelineFilter value={filterSelector('period')} onChange={updateFilter('period')} />
       <DurationFilter value={filterSelector('duration')} onChange={updateFilter('duration')} />
       <MultiInputFilter
         key="trace.id"
@@ -1645,6 +1647,14 @@ const TargetTracesPageQuery = graphql(`
 function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
   const [filtersOpen, setFiltersOpen] = useState(true);
   const targetRef = useTargetReference();
+
+  const period = useMemo(() => {
+    if (!props.filter.period.length) {
+      return null;
+    }
+    return dateMath.resolveRange({ from: props.filter.period[0], to: props.filter.period[1] });
+  }, [props.filter.period]);
+
   const [query] = useQuery({
     query: TargetTracesPageQuery,
     variables: {
@@ -1655,16 +1665,21 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
       },
       filterTopN: 5,
       filter: {
-        id: props.filter['trace.id'],
-        operationName: props.filter['graphql.operation'],
-        operationType: props.filter['graphql.kind'] as any,
-        success: props.filter['graphql.status'].map(s => s === 'ok'),
-        httpStatusCode: props.filter['http.status'].map(Number),
-        httpMethod: props.filter['http.method'],
-        httpHost: props.filter['http.host'],
-        httpRoute: props.filter['http.route'],
-        httpUrl: props.filter['http.url'],
-        subgraphs: props.filter['graphql.subgraph'],
+        period,
+        duration: {
+          min: props.filter.duration[0] ?? null,
+          max: props.filter.duration[1] ?? null,
+        },
+        // id: props.filter['trace.id'],
+        // operationName: props.filter['graphql.operation'],
+        // operationType: props.filter['graphql.kind'] as any,
+        // success: props.filter['graphql.status'].map(s => s === 'ok'),
+        // httpStatusCode: props.filter['http.status'].map(Number),
+        // httpMethod: props.filter['http.method'],
+        // httpHost: props.filter['http.host'],
+        // httpRoute: props.filter['http.route'],
+        // httpUrl: props.filter['http.url'],
+        // subgraphs: props.filter['graphql.subgraph'],
       },
       first: props.pagination.pageSize,
     },
diff --git a/packages/web/app/src/pages/traces/target-traces-filter.tsx b/packages/web/app/src/pages/traces/target-traces-filter.tsx
new file mode 100644
index 0000000000..1f190b09bf
--- /dev/null
+++ b/packages/web/app/src/pages/traces/target-traces-filter.tsx
@@ -0,0 +1,672 @@
+import {
+  ChangeEventHandler,
+  ComponentPropsWithoutRef,
+  ElementRef,
+  forwardRef,
+  Fragment,
+  InputHTMLAttributes,
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { addDays, formatDate, setHours, setMinutes } from 'date-fns';
+import debounce from 'lodash.debounce';
+import {
+  CalendarIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  CircleXIcon,
+  MinusIcon,
+  PlusIcon,
+} from 'lucide-react';
+import type { DateRange } from 'react-day-picker';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { findMatchingPreset, Preset } from '@/components/ui/date-range-picker';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarSeparator,
+} from '@/components/ui/sidebar';
+import { formatNumber } from '@/lib/hooks';
+import { useResetState } from '@/lib/hooks/use-reset-state';
+import { cn } from '@/lib/utils';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as dateMath from '../../lib/date-math';
+
+interface FilterInputProps extends InputHTMLAttributes<HTMLInputElement> {}
+
+export const FilterInput = forwardRef<HTMLInputElement, FilterInputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+
+export function FilterLocalSearch(props: { value: string; onChange(value: string): void }) {
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    props.onChange(e.target.value);
+  }, []);
+
+  return (
+    <div className="mt-4 flex w-full max-w-sm items-center space-x-2">
+      <FilterInput
+        type="text"
+        placeholder="Search values"
+        value={props.value}
+        onChange={handleChange}
+      />
+    </div>
+  );
+}
+
+export function FilterTitle(props: { children: ReactNode; changes?: number; onReset(): void }) {
+  return (
+    <SidebarGroupLabel
+      asChild
+      className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+    >
+      <CollapsibleTrigger>
+        <ChevronRightIcon className="mr-2 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+        {props.children}
+        {props.changes ? (
+          <Button
+            variant="secondary"
+            size="sm"
+            className="hover:bg-secondary group ml-auto h-6 w-8 px-1 py-0 text-xs text-gray-500"
+            onClick={e => {
+              e.preventDefault();
+              props.onReset();
+            }}
+            asChild
+          >
+            <div>
+              <CircleXIcon className="hidden size-3 group-hover:block" />
+              <span className="block group-hover:hidden">{props.changes}</span>
+            </div>
+          </Button>
+        ) : null}
+      </CollapsibleTrigger>
+    </SidebarGroupLabel>
+  );
+}
+
+export function FilterContent(props: { children: ReactNode }) {
+  return (
+    <CollapsibleContent>
+      <SidebarGroupContent>
+        <SidebarMenu>{props.children}</SidebarMenu>
+      </SidebarGroupContent>
+    </CollapsibleContent>
+  );
+}
+
+export const MultiInputFilter = memo(
+  (props: {
+    name: string;
+    /**
+     * Filter's key for the backend and url state
+     */
+    key: string;
+    selectedValues: string[];
+    onChange(selectedValues: string[]): void;
+  }) => {
+    const [traceId, setTraceId] = useState('');
+    const handleTraceIdChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        setTraceId(e.target.value);
+      },
+      [setTraceId],
+    );
+
+    const addTraceId = useCallback(() => {
+      if (!traceId) {
+        return;
+      }
+
+      if (!props.selectedValues.includes(traceId)) {
+        props.onChange(props.selectedValues.concat(traceId));
+      }
+
+      setTraceId('');
+    }, [traceId, setTraceId]);
+
+    return (
+      <Filter name={props.name}>
+        <FilterTitle
+          changes={props.selectedValues.length}
+          children={props.name}
+          onReset={() => props.onChange([])}
+        />
+        <FilterContent>
+          <form
+            className="mt-4 flex w-full max-w-sm items-center space-x-2"
+            onSubmit={e => {
+              e.preventDefault();
+              addTraceId();
+            }}
+          >
+            <FilterInput
+              type="text"
+              placeholder="Trace ID..."
+              value={traceId}
+              onChange={handleTraceIdChange}
+            />
+            <Button
+              variant="secondary"
+              className="h-9 w-9 p-0"
+              type="submit"
+              onClick={() => {
+                addTraceId();
+              }}
+            >
+              <PlusIcon className="size-4" />
+            </Button>
+          </form>
+          {props.selectedValues.map(value => (
+            <SidebarMenuButton
+              key={value}
+              onClick={() => props.onChange(props.selectedValues.filter(val => val !== value))}
+              className="group/trace-id hover:bg-sidebar-accent/50"
+            >
+              <div
+                data-active
+                className="text-sidebar-primary-foreground border-sidebar-primary bg-sidebar-primary group-hover/trace-id:border-sidebar-border flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border group-hover/trace-id:bg-transparent"
+              >
+                <CheckIcon className="block size-3 group-hover/trace-id:hidden" />
+                <MinusIcon className="hidden size-3 group-hover/trace-id:block" />
+              </div>
+              {value}
+            </SidebarMenuButton>
+          ))}
+        </FilterContent>
+      </Filter>
+    );
+  },
+);
+
+export const MultiSelectFilter = memo(function <$Value>(props: {
+  name: string;
+  /**
+   * Filter's key for the backend and url state
+   */
+  key: string;
+  hideSearch?: boolean;
+  options: Array<{
+    /**
+     * How often it occurs
+     */
+    count: number;
+    /**
+     * What to display
+     */
+    label: ReactNode;
+    /**
+     * What to use when searching
+     */
+    searchContent: string;
+    /**
+     * A value to use when the filter is selected
+     */
+    value: $Value;
+  }>;
+  selectedValues: $Value[];
+  onChange(selectedValues: $Value[]): void;
+}) {
+  const [searchPhrase, setSearchPhrase] = useState('');
+  const filteredOptions = useMemo(() => {
+    const lowerSearchPhrase = searchPhrase.toLowerCase().trim();
+
+    if (!lowerSearchPhrase) {
+      return props.options;
+    }
+
+    return props.options.filter(option =>
+      option.searchContent.toLowerCase().includes(lowerSearchPhrase),
+    );
+  }, [searchPhrase, props.options]);
+
+  return (
+    <Filter name={props.name}>
+      <FilterTitle
+        changes={props.selectedValues.length}
+        children={props.name}
+        onReset={() => props.onChange([])}
+      />
+      <FilterContent>
+        {!props.hideSearch && <FilterLocalSearch value={searchPhrase} onChange={setSearchPhrase} />}
+        {filteredOptions.map((option, index) => (
+          <FilterOption
+            key={index}
+            selected={props.selectedValues.includes(option.value)}
+            count={option.count}
+            onClick={() => {
+              if (props.selectedValues.includes(option.value)) {
+                props.onChange(props.selectedValues.filter(val => val !== option.value));
+              } else {
+                props.onChange(props.selectedValues.concat(option.value));
+              }
+            }}
+          >
+            {option.label}
+          </FilterOption>
+        ))}
+      </FilterContent>
+    </Filter>
+  );
+});
+
+function FilterOption(props: {
+  onClick(): void;
+  selected: boolean;
+  children: ReactNode;
+  count?: number;
+}) {
+  return (
+    <SidebarMenuButton
+      onClick={props.onClick}
+      className="hover:bg-sidebar-accent/50 flex-row items-center justify-between"
+    >
+      <div className="flex items-center gap-2 overflow-hidden">
+        <div
+          data-active={props.selected}
+          className="group/filter-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+        >
+          <CheckIcon className="hidden size-3 group-data-[active=true]/filter-item:block" />
+        </div>
+        {props.children}
+      </div>
+      {props.count ? (
+        <Badge variant="secondary" className="rounded-sm px-1 font-mono font-normal">
+          {formatNumber(props.count)}
+        </Badge>
+      ) : null}
+    </SidebarMenuButton>
+  );
+}
+
+function Filter(props: { name: string; children: ReactNode }) {
+  return (
+    <Fragment key={props.name}>
+      <SidebarGroup key={props.name} className="py-0">
+        <Collapsible className="group/collapsible">{props.children}</Collapsible>
+      </SidebarGroup>
+      <SidebarSeparator className="mx-0" />
+    </Fragment>
+  );
+}
+
+const DoubleSlider = forwardRef<
+  ElementRef<typeof SliderPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn('relative flex w-full touch-none select-none items-center', className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-800">
+      <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
+    </SliderPrimitive.Track>
+    {props.value?.map((_, index) => (
+      <SliderPrimitive.Thumb
+        key={index}
+        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+      />
+    ))}
+  </SliderPrimitive.Root>
+));
+
+export const DurationFilter = memo(
+  (props: { value: [number, number] | []; onChange(value: [number, number]): void }) => {
+    const minValue = 0;
+    const maxValue = 100000;
+    const defaultValues: [number, number] = [minValue, maxValue];
+    const [values, setValues] = useState<[number, number]>(
+      props.value.length ? props.value : defaultValues,
+    );
+
+    const handleStateChange = useMemo(
+      () =>
+        debounce((newValues: [number, number]) => {
+          props.onChange(newValues);
+        }, 1000),
+      [props.onChange],
+    );
+
+    const handleSliderChange = useCallback(
+      (newValues: [number, number]) => {
+        handleStateChange(newValues);
+        setValues(newValues);
+      },
+      [handleStateChange, setValues],
+    );
+
+    useEffect(() => {
+      return () => handleStateChange.cancel();
+    }, [handleStateChange]);
+
+    const handleInputChange = useCallback(
+      (index: number, value: string) => {
+        const numValue = Number.parseInt(value) || minValue;
+        const newValues: [number, number] = [...values];
+        newValues[index] = Math.min(Math.max(numValue, minValue), maxValue);
+
+        handleStateChange(newValues);
+        setValues(newValues);
+      },
+      [handleStateChange, setValues],
+    );
+
+    const handleMinInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      e => handleInputChange(0, e.target.value),
+      [handleInputChange],
+    );
+
+    const handleMaxInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+      e => handleInputChange(1, e.target.value),
+      [handleInputChange],
+    );
+
+    return (
+      <Filter name="Duration">
+        <FilterTitle
+          changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
+          children={'Duration'}
+          onReset={() => props.onChange(defaultValues)}
+        />
+        <FilterContent>
+          <div className="space-y-6 p-2">
+            <div className="space-y-2">
+              <div className="space-y-1">
+                <label className="font-mono text-xs text-zinc-400">MIN</label>
+                <div className="relative">
+                  <FilterInput
+                    type="number"
+                    value={values[0]}
+                    onChange={handleMinInputChange}
+                    className="h-7 border-zinc-800 bg-transparent px-2 pr-8 font-mono text-white"
+                  />
+                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-zinc-400">
+                    ms
+                  </span>
+                </div>
+              </div>
+              <div className="space-y-1">
+                <label className="font-mono text-xs text-zinc-400">MAX</label>
+                <div className="relative">
+                  <FilterInput
+                    type="number"
+                    value={values[1]}
+                    onChange={handleMaxInputChange}
+                    className="h-7 border-gray-800 bg-transparent px-2 pr-8 font-mono text-white"
+                  />
+                  <span className="absolute right-2 top-1/2 -translate-y-1/2 font-mono text-xs text-gray-400">
+                    ms
+                  </span>
+                </div>
+              </div>
+            </div>
+            <DoubleSlider
+              defaultValue={defaultValues}
+              max={maxValue}
+              min={minValue}
+              step={1}
+              value={values}
+              onValueChange={handleSliderChange}
+              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+            />
+          </div>
+        </FilterContent>
+      </Filter>
+    );
+  },
+);
+
+const availableTimelineFilterPresets: Array<Preset> = [
+  { name: 'last5m', label: 'Last 5 minutes', range: { from: 'now-5m', to: 'now' } },
+  { name: 'last1hour', label: 'Last 1 hour', range: { from: 'now-1h', to: 'now' } },
+  { name: 'last3hours', label: 'Last 3 hours', range: { from: 'now-3h', to: 'now' } },
+  { name: 'last12hours', label: 'Last 12 hours', range: { from: 'now-12h', to: 'now' } },
+  { name: 'last24hours', label: 'Last 24 hours', range: { from: 'now-24h', to: 'now' } },
+];
+
+export const TimelineFilter = memo(
+  (props: { value: [string, string] | []; onChange(value: [string, string]): void }) => {
+    const selectedPreset = useMemo<Preset | null>(() => {
+      if (!props.value.length) {
+        return null;
+      }
+
+      return (
+        findMatchingPreset(
+          {
+            from: props.value[0],
+            to: props.value[1],
+          },
+          availableTimelineFilterPresets,
+        ) ?? {
+          name: 'custom',
+          label: 'Custom',
+          range: {
+            from: props.value[0],
+            to: props.value[1],
+          },
+        }
+      );
+    }, [props.value]);
+
+    const [isRangeSelectorPopupOpen, setIsRangeSelectorPopupOpen] = useState(false);
+
+    const [dateRange, setDateRange] = useResetState<DateRange | undefined>(
+      () =>
+        selectedPreset?.name === 'custom'
+          ? {
+              from: new Date(selectedPreset.range.from),
+              to: new Date(selectedPreset.range.to),
+            }
+          : {
+              from: addDays(new Date(), -3),
+              to: new Date(),
+            },
+      [props.value[0], props.value[1], isRangeSelectorPopupOpen],
+    );
+
+    const formatted = useMemo(() => {
+      if (!dateRange?.from || !dateRange.to || selectedPreset?.name !== 'custom') {
+        return 'Select time period';
+      }
+
+      const fromDate = formatDate(dateRange.from, 'MMM d');
+      const fromTime = formatDate(dateRange.from, 'HH:mm');
+      const toDate = formatDate(dateRange.to, 'MMM d');
+      const toTime = formatDate(dateRange.to, 'HH:mm');
+
+      if (fromDate === toDate) {
+        return `${fromDate}, ${fromTime} - ${toTime}`;
+      }
+
+      return `${fromDate}, ${fromTime} - ${toDate}, ${toTime}`;
+    }, [dateRange, selectedPreset]);
+
+    return (
+      <Filter name="Timeline">
+        <FilterTitle changes={0} children={'Timeline'} onReset={() => {}} />
+        <FilterContent>
+          <div className="space-y-2 p-2">
+            <Select
+              value={selectedPreset?.name ?? undefined}
+              onValueChange={value => {
+                if (value === 'custom') {
+                  const preset = selectedPreset ?? availableTimelineFilterPresets[0];
+                  props.onChange([
+                    dateMath.parse(preset.range.from)?.toISOString() ?? new Date().toISOString(),
+                    dateMath.parse(preset.range.to)?.toISOString() ?? new Date().toISOString(),
+                  ]);
+                  return;
+                }
+                const preset = availableTimelineFilterPresets.find(preset => preset.name === value);
+                if (preset) {
+                  props.onChange([preset.range.from, preset.range.to]);
+                }
+              }}
+            >
+              <SelectTrigger className="bg-background w-full">
+                <SelectValue placeholder="Select time period" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableTimelineFilterPresets.map(preset => (
+                  <SelectItem value={preset.name} key={preset.name}>
+                    {preset.label}
+                  </SelectItem>
+                ))}
+                <SelectItem value="custom">Custom</SelectItem>
+              </SelectContent>
+            </Select>
+            {selectedPreset?.name === 'custom' ? (
+              <>
+                <Popover
+                  open={isRangeSelectorPopupOpen}
+                  onOpenChange={isOpen => {
+                    setIsRangeSelectorPopupOpen(isOpen);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <Button variant="outline" className="w-full justify-start px-2 text-left">
+                      <CalendarIcon className="mr-2 size-4" />{' '}
+                      <span className="text-xs">{formatted}</span>
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="center">
+                    <Calendar
+                      initialFocus
+                      mode="range"
+                      defaultMonth={dateRange?.from}
+                      selected={dateRange}
+                      onSelect={setDateRange}
+                      numberOfMonths={1}
+                      className="p-2 pb-0"
+                    />
+                    <div className="border-border mt-4 space-y-2 border-t p-2">
+                      <div>
+                        <Label className="text-sm font-normal text-gray-500">Start</Label>
+                        <div className="flex items-center gap-x-2">
+                          <Input
+                            className="h-8 w-[152px] py-0"
+                            value={dateRange?.from ? formatDate(dateRange.from, 'yyyy-MM-dd') : ''}
+                          />
+                          <Input
+                            className="h-8 w-16 py-0"
+                            value={dateRange?.from ? formatDate(dateRange.from, 'HH:mm') : ''}
+                            type="time"
+                            min="00:00"
+                            max="23:59"
+                            onChange={ev => {
+                              setDateRange(range =>
+                                range
+                                  ? {
+                                      ...range,
+                                      from: setMinutes(
+                                        setHours(
+                                          range.from ?? new Date(),
+                                          parseInt(ev.target.value.substr(0, 2)),
+                                        ),
+                                        parseInt(ev.target.value.substr(3, 5)),
+                                      ),
+                                    }
+                                  : undefined,
+                              );
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <Label className="text-sm font-normal text-gray-500">End</Label>
+                        <div className="flex items-center gap-x-2">
+                          <Input
+                            className="h-8 w-[152px] py-0"
+                            value={dateRange?.to ? formatDate(dateRange.to, 'yyyy-MM-dd') : ''}
+                          />
+                          <Input
+                            className="h-8 w-16 py-0"
+                            value={dateRange?.to ? formatDate(dateRange.to, 'HH:mm') : ''}
+                            type="time"
+                            min="00:00"
+                            max="23:59"
+                            onChange={ev => {
+                              setDateRange(range =>
+                                range
+                                  ? {
+                                      ...range,
+                                      to: setMinutes(
+                                        setHours(
+                                          range.to ?? new Date(),
+                                          parseInt(ev.target.value.substr(0, 2)),
+                                        ),
+                                        parseInt(ev.target.value.substr(3, 5)),
+                                      ),
+                                    }
+                                  : undefined,
+                              );
+                            }}
+                          />
+                        </div>
+                      </div>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="w-full"
+                        onClick={() => {
+                          if (!dateRange?.from || !dateRange.to) {
+                            return;
+                          }
+                          props.onChange([
+                            dateRange.from.toISOString(),
+                            dateRange.to.toISOString(),
+                          ]);
+                          setIsRangeSelectorPopupOpen(false);
+                        }}
+                      >
+                        <span className="relative">
+                          Apply
+                          <span className="absolute top-[4px] ml-2 text-xs">↵</span>
+                        </span>
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              </>
+            ) : null}
+          </div>
+        </FilterContent>
+      </Filter>
+    );
+  },
+);
diff --git a/packages/web/app/src/pages/traces/target-traces-width.tsx b/packages/web/app/src/pages/traces/target-traces-width.tsx
new file mode 100644
index 0000000000..5fec558a37
--- /dev/null
+++ b/packages/web/app/src/pages/traces/target-traces-width.tsx
@@ -0,0 +1,49 @@
+import { createContext, FC, ReactNode, useCallback, useContext, useRef, useState } from 'react';
+
+interface WidthSyncContextType {
+  width: number;
+  updateWidth: (newWidth: number) => void;
+}
+
+const WidthSyncContext = createContext<WidthSyncContextType | null>(null);
+
+interface WidthSyncProviderProps {
+  children: ReactNode;
+  defaultWidth: number;
+}
+
+export const WidthSyncProvider: FC<WidthSyncProviderProps> = props => {
+  const [width, setWidth] = useState<number>(props.defaultWidth);
+  // Throttle state to avoid too many updates during slider dragging
+  const throttleTimerRef = useRef<number | null>(null);
+
+  // Ensure width stays within bounds and apply to all registered components
+  const handleSetWidth = useCallback((newWidth: number) => {
+    // Clear any existing throttle timer
+    if (throttleTimerRef.current !== null) {
+      window.cancelAnimationFrame(throttleTimerRef.current);
+    }
+
+    // Use requestAnimationFrame for smoother updates
+    throttleTimerRef.current = window.requestAnimationFrame(() => {
+      const boundedWidth = newWidth;
+      setWidth(boundedWidth);
+
+      throttleTimerRef.current = null;
+    });
+  }, []);
+
+  return (
+    <WidthSyncContext.Provider value={{ width, updateWidth: handleSetWidth }}>
+      {props.children}
+    </WidthSyncContext.Provider>
+  );
+};
+
+export const useWidthSync = () => {
+  const context = useContext(WidthSyncContext);
+  if (!context) {
+    throw new Error('useWidthSync must be used within a WidthSyncProvider');
+  }
+  return [context.width, context.updateWidth] as const;
+};

From 50d19ad0b558315e341abfba511352794332f4a6 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 14:20:16 +0200
Subject: [PATCH 028/123] implement reset timeline

---
 .../web/app/src/pages/traces/target-traces-filter.tsx     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/src/pages/traces/target-traces-filter.tsx b/packages/web/app/src/pages/traces/target-traces-filter.tsx
index 1f190b09bf..18f9780c29 100644
--- a/packages/web/app/src/pages/traces/target-traces-filter.tsx
+++ b/packages/web/app/src/pages/traces/target-traces-filter.tsx
@@ -459,7 +459,7 @@ const availableTimelineFilterPresets: Array<Preset> = [
 ];
 
 export const TimelineFilter = memo(
-  (props: { value: [string, string] | []; onChange(value: [string, string]): void }) => {
+  (props: { value: [string, string] | []; onChange(value: [string, string] | []): void }) => {
     const selectedPreset = useMemo<Preset | null>(() => {
       if (!props.value.length) {
         return null;
@@ -518,7 +518,11 @@ export const TimelineFilter = memo(
 
     return (
       <Filter name="Timeline">
-        <FilterTitle changes={0} children={'Timeline'} onReset={() => {}} />
+        <FilterTitle
+          changes={props.value.length ? 1 : 0}
+          children={'Timeline'}
+          onReset={() => props.onChange([])}
+        />
         <FilterContent>
           <div className="space-y-2 p-2">
             <Select

From 1e381f33fffec0efd76ff48a86cba7fef0925c67 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 14:50:44 +0200
Subject: [PATCH 029/123] avoid `[""]`

---
 .../src/clickhouse-actions/015-otel-trace.ts   | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index dc0be2d88f..bbb6ebda03 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -167,8 +167,16 @@ export const action: Action = async exec => {
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
         , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
-        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
-        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names'])) AS "subgraph_names"
+        , if(
+            "SpanAttributes"['hive.graphql.error.codes'] = '',
+            [],
+            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes']))
+          ) AS "graphql_error_codes"
+        , if(
+            "SpanAttributes"['hive.subgraph.names'] = '',
+            [],
+            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names']))
+          ) AS "subgraph_names"
       FROM
         "otel_traces"
       WHERE
@@ -246,7 +254,11 @@ export const action: Action = async exec => {
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
         , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
-        , arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes'])) AS "graphql_error_codes"
+        , if(
+            "SpanAttributes"['hive.graphql.error.codes'] = '',
+            [],
+            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes']))
+          ) AS "graphql_error_codes"
       FROM
         "otel_traces"
       WHERE

From 50e2d3d2881bd74f6fb675ed8e4d4f84c49f35a5 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 15:57:06 +0200
Subject: [PATCH 030/123] filter by error code

---
 .../src/modules/operations/module.graphql.ts  | 53 +++++++++--
 .../modules/operations/providers/traces.ts    | 95 ++++++++++---------
 .../modules/operations/resolvers/Target.ts    | 47 +++++----
 .../src/modules/operations/resolvers/Trace.ts |  7 +-
 .../resolvers/TracesFilterOptions.ts          | 22 +++--
 packages/web/app/src/pages/target-traces.tsx  | 45 +++++++--
 6 files changed, 177 insertions(+), 92 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 09d419e5c1..91eedba0ee 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -279,7 +279,7 @@ export default gql`
     success: Boolean!
     clientName: String
     clientVersion: String
-    httpStatusCode: Int
+    httpStatusCode: String
     httpMethod: String
     httpHost: String
     httpRoute: String
@@ -314,23 +314,56 @@ export default gql`
     Duration filter for the traces.
     """
     duration: DurationInput
-    id: [ID!]
+    """
+    Filter based on trace ID.
+    """
+    traceIds: [ID!]
+    """
+    Filter based on whether the operation is a success.
+    A operation is successful if no GraphQL error has occured and the result is within the 2XX or 3XX range.
+    """
+    success: [Boolean!]
+    """
+    Filter based on GraphQL error codes (error.extensions.code).
+    """
+    errorCodes: [String!]
     operationName: [String!]
     operationType: [GraphQLOperationType!]
-    success: [Boolean!]
-    httpStatusCode: [Int!]
-    httpMethod: [String!]
-    httpHost: [String!]
-    httpRoute: [String!]
-    httpUrl: [String!]
-    subgraphs: [String!]
+    """
+    Filter based on the HTTP status code of the request.
+    """
+    httpStatusCodes: [String!]
+    """
+    Filter based on the HTTP method of the request.
+    """
+    httpMethods: [String!]
+    """
+    Filter based on the HTTP host of the request.
+    """
+    httpHosts: [String!]
+    """
+    Filter based on the HTTP route of the request.
+    """
+    httpRoutes: [String!]
+    """
+    Filter based on the HTTP URL of the request.
+    """
+    httpUrls: [String!]
+    """
+    Filter based on called subgraphs.
+    """
+    subgraphNames: [String!]
   }
 
   type TracesFilterOptions {
     success: [FilterBooleanOption!]!
+    """
+    Filter based on GraphQL error code.
+    """
+    errorCode(top: Int): [FilterStringOption!]!
     operationType: [FilterStringOption!]!
     operationName(top: Int): [FilterStringOption!]!
-    httpStatusCode(top: Int): [FilterIntOption!]!
+    httpStatusCode(top: Int): [FilterStringOption!]!
     httpMethod(top: Int): [FilterStringOption!]!
     httpHost(top: Int): [FilterStringOption!]!
     httpRoute(top: Int): [FilterStringOption!]!
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 9a274f914b..63ebb0f3c5 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -97,16 +97,17 @@ export class Traces {
         min: number | null;
         max: number | null;
       } | null;
-      id?: Array<string>;
-      success?: Array<boolean>;
+      traceIds: ReadonlyArray<string> | null;
+      success: ReadonlyArray<boolean> | null;
+      errorCodes: ReadonlyArray<string> | null;
       operationName?: Array<string>;
       operationType?: Array<string>;
-      subgraphs?: Array<string>;
-      httpStatusCode?: Array<string>;
-      httpMethod?: Array<string>;
-      httpHost?: Array<string>;
-      httpRoute?: Array<string>;
-      httpUrl?: Array<string>;
+      subgraphNames: ReadonlyArray<string> | null;
+      httpStatusCodes: ReadonlyArray<string> | null;
+      httpMethods: ReadonlyArray<string> | null;
+      httpHosts: ReadonlyArray<string> | null;
+      httpRoutes: ReadonlyArray<string> | null;
+      httpUrls: ReadonlyArray<string> | null;
     },
   ) {
     const clickhouse = this.clickHouse;
@@ -132,25 +133,29 @@ export class Traces {
       ANDs.push(sql`"duration" <= ${String(filter.duration.max * 1_000 * 1_000)}`);
     }
 
-    // if (filter?.id?.length) {
-    //   ANDs.push(sql`"trace_id" IN (${sql.array(filter.id, 'String')})`);
-    // }
+    if (filter?.traceIds?.length) {
+      ANDs.push(sql`"trace_id" IN (${sql.array(filter.traceIds, 'String')})`);
+    }
 
-    // if (filter?.success?.length) {
-    //   // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
-    //   ANDs.push(
-    //     sql`${sql.join(
-    //       filter.success.map(ok =>
-    //         ok
-    //           ? // 2XX
-    //             sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
-    //           : // non-2XXX
-    //             sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
-    //       ),
-    //       ' OR ',
-    //     )}`,
-    //   );
-    // }
+    // Success based on GraphQL terms
+    if (filter?.success?.length) {
+      const hasSuccess = filter.success.includes(true);
+      const hasError = filter.success.includes(false);
+
+      if (hasSuccess && !hasError) {
+        ANDs.push(sql`"graphql_error_count" = 0`);
+        ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
+      } else if (hasError && !hasSuccess) {
+        ANDs.push(sql`"graphql_error_count" > 0`);
+        ANDs.push(
+          sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
+        );
+      }
+    }
+
+    if (filter?.errorCodes?.length) {
+      ANDs.push(sql`hasAny("graphql_error_codes", (${sql.array(filter.errorCodes, 'String')}))`);
+    }
 
     // if (filter?.operationName?.length) {
     //   ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
@@ -160,31 +165,29 @@ export class Traces {
     //   ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
     // }
 
-    // if (filter?.subgraphs?.length) {
-    //   ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
-    // }
+    if (filter?.subgraphNames?.length) {
+      ANDs.push(sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames, 'String')}))`);
+    }
 
-    // if (filter?.httpStatusCode?.length) {
-    //   ANDs.push(
-    //     sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
-    //   );
-    // }
+    if (filter?.httpStatusCodes?.length) {
+      ANDs.push(sql`"http_status_code" IN (${sql.array(filter.httpStatusCodes, 'String')})`);
+    }
 
-    // if (filter?.httpMethod?.length) {
-    //   ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
-    // }
+    if (filter?.httpMethods?.length) {
+      ANDs.push(sql`"http_method" IN (${sql.array(filter.httpMethods, 'String')})`);
+    }
 
-    // if (filter?.httpHost?.length) {
-    //   ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
-    // }
+    if (filter?.httpHosts?.length) {
+      ANDs.push(sql`"http_host" IN (${sql.array(filter.httpHosts, 'String')})`);
+    }
 
-    // if (filter?.httpRoute?.length) {
-    //   ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
-    // }
+    if (filter?.httpRoutes?.length) {
+      ANDs.push(sql`"http_route" IN (${sql.array(filter.httpRoutes, 'String')})`);
+    }
 
-    // if (filter?.httpUrl?.length) {
-    //   ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
-    // }
+    if (filter?.httpUrls?.length) {
+      ANDs.push(sql`"http_url" IN (${sql.array(filter.httpUrls, 'String')})`);
+    }
 
     const tracesQuery = await clickhouse.query<unknown>({
       query: sql`
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index dcb491d77f..d69702a4f1 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -85,13 +85,22 @@ export const Target: Pick<
             max: filter.duration.max ?? null,
           }
         : null,
+      traceIds: filter?.traceIds ?? null,
+      success: filter?.success ?? null,
+      errorCodes: filter?.errorCodes ?? null,
+      subgraphNames: filter?.subgraphNames ?? null,
+      httpMethods: filter?.httpMethods ?? null,
+      httpStatusCodes: filter?.httpStatusCodes ?? null,
+      httpHosts: filter?.httpHosts ?? null,
+      httpRoutes: filter?.httpRoutes ?? null,
+      httpUrls: filter?.httpUrls ?? null,
     });
   },
-  tracesFilterOptions: async (_parent, { filter }, { injector }) => {
-    const ANDs: SqlValue[] = [sql`target_id = ${'target-1'}`];
+  tracesFilterOptions: async (target, { filter }, { injector }) => {
+    const ANDs: SqlValue[] = [sql`target_id = ${target.id}`];
 
-    if (filter?.id?.length) {
-      ANDs.push(sql`trace_id IN (${sql.array(filter.id, 'String')})`);
+    if (filter?.traceIds?.length) {
+      ANDs.push(sql`"trace_id" IN (${sql.array(filter.traceIds, 'String')})`);
     }
 
     if (filter?.success?.length) {
@@ -111,37 +120,39 @@ export const Target: Pick<
     }
 
     if (filter?.operationName?.length) {
-      ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
+      ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationName, 'String')})`);
     }
 
     if (filter?.operationType?.length) {
-      ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
+      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationType, 'String')})`);
     }
 
-    if (filter?.subgraphs?.length) {
-      ANDs.push(sql`hasAny(subgraph_names, (${sql.array(filter.subgraphs.flat(), 'String')}))`);
+    if (filter?.subgraphNames?.length) {
+      ANDs.push(
+        sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames.flat(), 'String')}))`,
+      );
     }
 
-    if (filter?.httpStatusCode?.length) {
+    if (filter?.httpStatusCodes?.length) {
       ANDs.push(
-        sql`http_status_code IN (${sql.array(filter.httpStatusCode.map(String), 'UInt16')})`,
+        sql`"http_status_code" IN (${sql.array(filter.httpStatusCodes.map(String), 'UInt16')})`,
       );
     }
 
-    if (filter?.httpMethod?.length) {
-      ANDs.push(sql`http_method IN (${sql.array(filter.httpMethod, 'String')})`);
+    if (filter?.httpMethods?.length) {
+      ANDs.push(sql`"http_method" IN (${sql.array(filter.httpMethods, 'String')})`);
     }
 
-    if (filter?.httpHost?.length) {
-      ANDs.push(sql`http_host IN (${sql.array(filter.httpHost, 'String')})`);
+    if (filter?.httpHosts?.length) {
+      ANDs.push(sql`"http_host" IN (${sql.array(filter.httpHosts, 'String')})`);
     }
 
-    if (filter?.httpRoute?.length) {
-      ANDs.push(sql`http_route IN (${sql.array(filter.httpRoute, 'String')})`);
+    if (filter?.httpRoutes?.length) {
+      ANDs.push(sql`"http_route" IN (${sql.array(filter.httpRoutes, 'String')})`);
     }
 
-    if (filter?.httpUrl?.length) {
-      ANDs.push(sql`http_url IN (${sql.array(filter.httpUrl, 'String')})`);
+    if (filter?.httpUrls?.length) {
+      ANDs.push(sql`"http_url" IN (${sql.array(filter.httpUrls, 'String')})`);
     }
 
     const loader = new Dataloader<
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
index 03c9da5cb9..5617a000f2 100644
--- a/packages/services/api/src/modules/operations/resolvers/Trace.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -19,7 +19,7 @@ export const Trace: TraceResolvers = {
     return 'noop';
   },
   httpStatusCode(trace) {
-    return Number(trace.httpStatusCode);
+    return trace.httpStatusCode;
   },
   id(trace) {
     return trace.traceId;
@@ -37,6 +37,9 @@ export const Trace: TraceResolvers = {
     return trace.subgraphNames;
   },
   success(trace) {
-    return trace.httpStatusCode === '200';
+    return (
+      (trace.graphqlErrorCodes?.length ?? 0) === 0 &&
+      (trace.httpStatusCode.startsWith('2') || trace.httpStatusCode.startsWith('3'))
+    );
   },
 };
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index 2c4848f66e..527944b104 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -36,14 +36,12 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
     });
   },
   httpStatusCode: async ({ loader }, { top }) => {
-    return loader
-      .load({
-        key: 'http_status_code',
-        columnExpression: 'http_status_code',
-        limit: top ?? 5,
-        arrayJoinColumn: null,
-      })
-      .then(data => data.map(({ value, count }) => ({ value: Number(value), count })));
+    return loader.load({
+      key: 'http_status_code',
+      columnExpression: 'http_status_code',
+      limit: top ?? 5,
+      arrayJoinColumn: null,
+    });
   },
   httpUrl: async ({ loader }, { top }) => {
     return loader.load({
@@ -88,4 +86,12 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
       })
       .then(data => data.map(({ value, count }) => ({ value: value ? true : false, count })));
   },
+  errorCode: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'errorCode',
+      columnExpression: 'value',
+      limit: top ?? 10,
+      arrayJoinColumn: 'graphql_error_codes',
+    });
+  },
 };
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 794b13e76e..8e756e8d9a 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -847,6 +847,7 @@ export const TargetTracesFilterState = z.object({
   'graphql.subgraph': z.array(z.string()).default([]),
   'graphql.operation': z.array(z.string()).default([]),
   'graphql.client': z.array(z.string()).default([]),
+  'graphql.errorCode': z.array(z.string()).default([]),
   'http.status': z.array(z.string()).default([]),
   'http.method': z.array(z.string()).default([]),
   'http.host': z.array(z.string()).default([]),
@@ -1071,6 +1072,14 @@ const filterOptions = {
       count: 2_320_123,
     },
   ],
+  'graphql.errorCode': [
+    {
+      value: 'ERR_AAA',
+      searchContent: 'ERR_AAA',
+      label: 'ERR_AAA',
+      count: 12_000_000,
+    },
+  ],
 };
 
 function Filters(
@@ -1166,6 +1175,14 @@ function Filters(
         onChange={updateFilter('graphql.status')}
         hideSearch
       />
+      <MultiSelectFilter
+        key="graphql.errorCode"
+        name="Error Code"
+        options={filterOptions['graphql.errorCode']}
+        selectedValues={filterSelector('graphql.errorCode')}
+        onChange={updateFilter('graphql.errorCode')}
+        hideSearch
+      />
       <MultiSelectFilter
         key="graphql.kind"
         name="Operation Kind"
@@ -1639,6 +1656,10 @@ const TargetTracesPageQuery = graphql(`
           value
           count
         }
+        errorCode {
+          value
+          count
+        }
       }
     }
   }
@@ -1670,16 +1691,17 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           min: props.filter.duration[0] ?? null,
           max: props.filter.duration[1] ?? null,
         },
-        // id: props.filter['trace.id'],
+        traceIds: props.filter['trace.id'],
+        success: props.filter['graphql.status'].map(status => (status === 'ok' ? true : false)),
+        errorCodes: props.filter['graphql.errorCode'],
         // operationName: props.filter['graphql.operation'],
         // operationType: props.filter['graphql.kind'] as any,
-        // success: props.filter['graphql.status'].map(s => s === 'ok'),
-        // httpStatusCode: props.filter['http.status'].map(Number),
-        // httpMethod: props.filter['http.method'],
-        // httpHost: props.filter['http.host'],
-        // httpRoute: props.filter['http.route'],
-        // httpUrl: props.filter['http.url'],
-        // subgraphs: props.filter['graphql.subgraph'],
+        subgraphNames: props.filter['graphql.subgraph'],
+        httpStatusCodes: props.filter['http.status'],
+        httpMethods: props.filter['http.method'],
+        httpHosts: props.filter['http.host'],
+        httpRoutes: props.filter['http.route'],
+        httpUrls: props.filter['http.url'],
       },
       first: props.pagination.pageSize,
     },
@@ -1757,6 +1779,13 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           label: option.value,
           count: option.count,
         })) ?? [],
+      'graphql.errorCode':
+        options?.errorCode.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
       'graphql.client': [],
     };
   }, [query.data?.target?.tracesFilterOptions]);

From deac396ca185bb28bd031a0551273502f29cf833 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 16:12:18 +0200
Subject: [PATCH 031/123] all them filters work

---
 .../src/modules/operations/module.graphql.ts  | 10 ++++++++--
 .../modules/operations/providers/traces.ts    | 16 +++++++--------
 .../modules/operations/resolvers/Target.ts    | 20 ++++++++++---------
 .../resolvers/TracesFilterOptions.ts          |  2 +-
 4 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 91eedba0ee..3ffb104189 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -327,8 +327,14 @@ export default gql`
     Filter based on GraphQL error codes (error.extensions.code).
     """
     errorCodes: [String!]
-    operationName: [String!]
-    operationType: [GraphQLOperationType!]
+    """
+    Filter based on the operation name.
+    """
+    operationNames: [String!]
+    """
+    Filter based on the operation type.
+    """
+    operationTypes: [GraphQLOperationType!]
     """
     Filter based on the HTTP status code of the request.
     """
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 63ebb0f3c5..a64824ef4c 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -100,8 +100,8 @@ export class Traces {
       traceIds: ReadonlyArray<string> | null;
       success: ReadonlyArray<boolean> | null;
       errorCodes: ReadonlyArray<string> | null;
-      operationName?: Array<string>;
-      operationType?: Array<string>;
+      operationNames: ReadonlyArray<string> | null;
+      operationTypes: ReadonlyArray<string> | null;
       subgraphNames: ReadonlyArray<string> | null;
       httpStatusCodes: ReadonlyArray<string> | null;
       httpMethods: ReadonlyArray<string> | null;
@@ -157,13 +157,13 @@ export class Traces {
       ANDs.push(sql`hasAny("graphql_error_codes", (${sql.array(filter.errorCodes, 'String')}))`);
     }
 
-    // if (filter?.operationName?.length) {
-    //   ANDs.push(sql`graphql_operation_name IN (${sql.array(filter.operationName, 'String')})`);
-    // }
+    if (filter?.operationNames?.length) {
+      ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationNames, 'String')})`);
+    }
 
-    // if (filter?.operationType?.length) {
-    //   ANDs.push(sql`graphql_operation_type IN (${sql.array(filter.operationType, 'String')})`);
-    // }
+    if (filter?.operationTypes?.length) {
+      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
+    }
 
     if (filter?.subgraphNames?.length) {
       ANDs.push(sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames, 'String')}))`);
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index d69702a4f1..9721805e75 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -88,6 +88,8 @@ export const Target: Pick<
       traceIds: filter?.traceIds ?? null,
       success: filter?.success ?? null,
       errorCodes: filter?.errorCodes ?? null,
+      operationNames: filter?.operationNames ?? null,
+      operationTypes: filter?.operationTypes ?? null,
       subgraphNames: filter?.subgraphNames ?? null,
       httpMethods: filter?.httpMethods ?? null,
       httpStatusCodes: filter?.httpStatusCodes ?? null,
@@ -119,12 +121,12 @@ export const Target: Pick<
       );
     }
 
-    if (filter?.operationName?.length) {
-      ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationName, 'String')})`);
+    if (filter?.operationNames?.length) {
+      ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationNames, 'String')})`);
     }
 
-    if (filter?.operationType?.length) {
-      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationType, 'String')})`);
+    if (filter?.operationTypes?.length) {
+      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
     }
 
     if (filter?.subgraphNames?.length) {
@@ -171,11 +173,11 @@ export const Target: Pick<
         for (const { key, columnExpression, limit, arrayJoinColumn } of inputs) {
           statements.push(sql`
             SELECT
-              ${key} as key,
-              toString(${sql.raw(columnExpression)}) AS value,
-              count(*) AS count
-            FROM otel_traces_normalized
-            ${sql.raw(arrayJoinColumn ? `ARRAY JOIN ${arrayJoinColumn} as value` : '')}
+              ${key} AS "key",
+              toString(${sql.raw(columnExpression)}) AS "value",
+              count(*) AS "count"
+            FROM "otel_traces_normalized"
+            ${sql.raw(arrayJoinColumn ? `ARRAY JOIN ${arrayJoinColumn} AS "value"` : '')}
             WHERE ${sql.join(ANDs, ' AND ')}
             GROUP BY value
             ORDER BY count DESC
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index 527944b104..31eb12a60a 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -13,7 +13,7 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
   /* Implement TracesFilterOptions resolver logic here */
   httpHost: async ({ loader }, { top }) => {
     return loader.load({
-      key: 'http_url',
+      key: 'http_host',
       columnExpression: 'http_host',
       limit: top ?? 5,
       arrayJoinColumn: null,

From f4db72fbf5d7aa71d75014967d36709cf07a6706 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 30 Jun 2025 16:19:52 +0200
Subject: [PATCH 032/123] reset state

---
 packages/web/app/src/pages/traces/target-traces-filter.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/web/app/src/pages/traces/target-traces-filter.tsx b/packages/web/app/src/pages/traces/target-traces-filter.tsx
index 18f9780c29..fca322382c 100644
--- a/packages/web/app/src/pages/traces/target-traces-filter.tsx
+++ b/packages/web/app/src/pages/traces/target-traces-filter.tsx
@@ -526,6 +526,8 @@ export const TimelineFilter = memo(
         <FilterContent>
           <div className="space-y-2 p-2">
             <Select
+              // The key is needed to reset the select state to show the SelectTrigger after resetting the filters.
+              key={`${props.value.at(0)}_${props.value.at(1)}`}
               value={selectedPreset?.name ?? undefined}
               onValueChange={value => {
                 if (value === 'custom') {

From 805974a72c77570ccc8bc5fb60e03e745989ea66 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 3 Jul 2025 11:13:13 +0200
Subject: [PATCH 033/123] time buckets

---
 .../src/clickhouse-actions/015-otel-trace.ts  |   2 +-
 .../src/modules/operations/module.graphql.ts  |  24 ++
 .../modules/operations/providers/traces.ts    | 338 ++++++++++++------
 .../modules/operations/resolvers/Target.ts    |  23 ++
 packages/web/app/src/pages/target-traces.tsx  |  46 ++-
 5 files changed, 323 insertions(+), 110 deletions(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index bbb6ebda03..890bc6d6b1 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -85,7 +85,7 @@ export const action: Action = async exec => {
     )
   `);
 
-  // Our own custom materialized views based on the base tables
+  // Table and MV for trace overview and filtering
   await exec(`
     CREATE TABLE IF NOT EXISTS "otel_traces_normalized" (
       "target_id" LowCardinality(String) CODEC(ZSTD(1))
diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 3ffb104189..b9ab406ded 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -392,6 +392,29 @@ export default gql`
     count: Int!
   }
 
+  type TraceStatusBreakdownBucket {
+    """
+    The time bucket for the data
+    """
+    timeBucket: DateTime!
+    """
+    Total amount of ok traces in the bucket.
+    """
+    okCountTotal: SafeInt!
+    """
+    Total amount of error traces in the bucket.
+    """
+    errorCountTotal: SafeInt!
+    """
+    Total amount of ok traces in the bucket based on the filter.
+    """
+    okCountFiltered: SafeInt!
+    """
+    Total mount of error traces in the bucket based on the filter.
+    """
+    errorCountFiltered: SafeInt!
+  }
+
   extend type Target {
     requestsOverTime(resolution: Int!, period: DateRangeInput!): [RequestsOverTime!]!
     totalRequests(period: DateRangeInput!): SafeInt!
@@ -401,6 +424,7 @@ export default gql`
     operation(hash: ID! @tag(name: "public")): Operation @tag(name: "public")
     traces(first: Int, after: String, filter: TracesFilterInput): TraceConnection!
     tracesFilterOptions(filter: TracesFilterInput): TracesFilterOptions!
+    tracesStatusBreakdown(filter: TracesFilterInput): [TraceStatusBreakdownBucket!]!
     trace(traceId: ID!): Trace
   }
 
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index a64824ef4c..8847397ba9 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -1,5 +1,6 @@
 import { Injectable } from 'graphql-modules';
 import { z } from 'zod';
+import { subDays } from '@/lib/date-time';
 import { batch, parseDateRangeInput } from '@hive/api/shared/helpers';
 import * as GraphQLSchema from '../../../__generated__/types';
 import { Logger } from '../../shared/providers/logger';
@@ -88,114 +89,22 @@ export class Traces {
     return SpanListModel.parse(result.data);
   }
 
-  async findTracesForTargetId(
-    targetId: string,
-    first: number | null,
-    filter: {
-      period: null | GraphQLSchema.DateRangeInput;
-      duration: {
-        min: number | null;
-        max: number | null;
-      } | null;
-      traceIds: ReadonlyArray<string> | null;
-      success: ReadonlyArray<boolean> | null;
-      errorCodes: ReadonlyArray<string> | null;
-      operationNames: ReadonlyArray<string> | null;
-      operationTypes: ReadonlyArray<string> | null;
-      subgraphNames: ReadonlyArray<string> | null;
-      httpStatusCodes: ReadonlyArray<string> | null;
-      httpMethods: ReadonlyArray<string> | null;
-      httpHosts: ReadonlyArray<string> | null;
-      httpRoutes: ReadonlyArray<string> | null;
-      httpUrls: ReadonlyArray<string> | null;
-    },
-  ) {
-    const clickhouse = this.clickHouse;
+  async findTracesForTargetId(targetId: string, first: number | null, filter: TraceFilter) {
     const limit = (first ?? 10) + 1;
+    const sqlConditions = buildTraceFilterSQLConditions(filter);
+    const filterSQLFragment = sqlConditions.length
+      ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
+      : sql``;
 
-    const ANDs: SqlValue[] = [sql`target_id = ${targetId}`];
-
-    if (filter?.period) {
-      const period = parseDateRangeInput(filter.period);
-      ANDs.push(
-        sql`"otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(period.from)}, 'UTC')`,
-      );
-      ANDs.push(
-        sql`"otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(period.to)}, 'UTC')`,
-      );
-    }
-
-    if (filter?.duration?.min) {
-      ANDs.push(sql`"duration" >= ${String(filter.duration.min * 1_000 * 1_000)}`);
-    }
-
-    if (filter?.duration?.max) {
-      ANDs.push(sql`"duration" <= ${String(filter.duration.max * 1_000 * 1_000)}`);
-    }
-
-    if (filter?.traceIds?.length) {
-      ANDs.push(sql`"trace_id" IN (${sql.array(filter.traceIds, 'String')})`);
-    }
-
-    // Success based on GraphQL terms
-    if (filter?.success?.length) {
-      const hasSuccess = filter.success.includes(true);
-      const hasError = filter.success.includes(false);
-
-      if (hasSuccess && !hasError) {
-        ANDs.push(sql`"graphql_error_count" = 0`);
-        ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
-      } else if (hasError && !hasSuccess) {
-        ANDs.push(sql`"graphql_error_count" > 0`);
-        ANDs.push(
-          sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
-        );
-      }
-    }
-
-    if (filter?.errorCodes?.length) {
-      ANDs.push(sql`hasAny("graphql_error_codes", (${sql.array(filter.errorCodes, 'String')}))`);
-    }
-
-    if (filter?.operationNames?.length) {
-      ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationNames, 'String')})`);
-    }
-
-    if (filter?.operationTypes?.length) {
-      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
-    }
-
-    if (filter?.subgraphNames?.length) {
-      ANDs.push(sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames, 'String')}))`);
-    }
-
-    if (filter?.httpStatusCodes?.length) {
-      ANDs.push(sql`"http_status_code" IN (${sql.array(filter.httpStatusCodes, 'String')})`);
-    }
-
-    if (filter?.httpMethods?.length) {
-      ANDs.push(sql`"http_method" IN (${sql.array(filter.httpMethods, 'String')})`);
-    }
-
-    if (filter?.httpHosts?.length) {
-      ANDs.push(sql`"http_host" IN (${sql.array(filter.httpHosts, 'String')})`);
-    }
-
-    if (filter?.httpRoutes?.length) {
-      ANDs.push(sql`"http_route" IN (${sql.array(filter.httpRoutes, 'String')})`);
-    }
-
-    if (filter?.httpUrls?.length) {
-      ANDs.push(sql`"http_url" IN (${sql.array(filter.httpUrls, 'String')})`);
-    }
-
-    const tracesQuery = await clickhouse.query<unknown>({
+    const tracesQuery = await this.clickHouse.query<unknown>({
       query: sql`
         SELECT
           ${traceFields}
         FROM
           "otel_traces_normalized"
-        WHERE ${sql.join(ANDs, ' AND ')}
+        WHERE
+          target_id = ${targetId}
+          ${filterSQLFragment}
         ORDER BY
           "timestamp" DESC
           , "trace_id" DESC
@@ -234,6 +143,78 @@ export class Traces {
       },
     };
   }
+
+  async getTraceStatusBreakdownForTargetId(targetId: string, filter: TraceFilter) {
+    const sqlConditions = buildTraceFilterSQLConditions(filter, true);
+    const filterSQLFragment = sqlConditions.length
+      ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
+      : sql``;
+
+    const endDate = filter.period?.to ?? new Date();
+    const startDate = filter.period?.from ?? subDays(endDate, 14);
+
+    // TODO: Find unit and range units based on filter.start and filter.end
+    //
+    const { unit, count: rangeUnits } = getBucketUnitAndCount(startDate, endDate);
+
+    const bucketFunctionName = {
+      minutes: 'MINUTE',
+      hours: 'HOUR',
+      days: 'DAY',
+      weeks: 'WEEK',
+      months: 'MONTH',
+    };
+
+    const bucketStepFunctionName = {
+      minutes: 'addMinutes',
+      hours: 'addHours',
+      days: 'addDays',
+      weeks: 'addWeeks',
+      months: 'addMonths',
+    };
+
+    const result = await this.clickHouse.query<unknown>({
+      query: sql`
+        WITH "time_bucket_list" AS (
+          SELECT
+            ${sql.raw(bucketStepFunctionName[unit])}(toStartOfInterval(toDateTime(${formatDate(startDate)}, 'UTC'), INTERVAL 1 ${sql.raw(bucketFunctionName[unit])}), "number" + 1) AS "time_bucket"
+          FROM
+            "system"."numbers"
+          WHERE "system"."numbers"."number" < ${String(rangeUnits)}
+        )
+        SELECT
+          replaceOne(concat(toDateTime64("time_bucket_list"."time_bucket", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucket"
+          , coalesce("t"."ok_count_total", 0) as "okCountTotal"
+          , coalesce("t"."error_count_total", 0) as "errorCountTotal"
+          , coalesce("t"."ok_count_filtered", 0) as "okCountFiltered"
+          , coalesce("t"."error_count_filtered", 0) as "errorCountFiltered"
+        FROM
+          "time_bucket_list"
+        LEFT JOIN
+        (
+          SELECT
+            toStartOfInterval("timestamp", INTERVAL 1 ${sql.raw(bucketFunctionName[unit])}) AS "time_bucket"
+            , sumIf(1, "graphql_error_count" = 0) AS "ok_count_total"
+            , sumIf(1, "graphql_error_count" != 0) AS "error_count_total"
+            , sumIf(1, "graphql_error_count" = 0 ${filterSQLFragment}) AS "ok_count_filtered"
+            , sumIf(1, "graphql_error_count" != 0 ${filterSQLFragment}) AS "error_count_filtered"
+          FROM
+            "otel_traces_normalized"
+          WHERE
+            "target_id" = ${targetId}
+            AND "otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(startDate)}, 'UTC')
+            AND "otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(endDate)}, 'UTC')
+          GROUP BY
+          "time_bucket"
+          ) AS "t"
+        ON "t"."time_bucket" = "time_bucket_list"."time_bucket"
+      `,
+      queryId: `trace_status_breakdown_for_target_id_${unit}_${rangeUnits}`,
+      timeout: 10_000,
+    });
+
+    return TraceStatusBreakdownBucketList.parse(result.data);
+  }
 }
 
 const traceFields = sql`
@@ -253,6 +234,105 @@ const traceFields = sql`
   , "subgraph_names" AS "subgraphNames"
 `;
 
+type TraceFilter = {
+  period: null | GraphQLSchema.DateRangeInput;
+  duration: {
+    min: number | null;
+    max: number | null;
+  } | null;
+  traceIds: ReadonlyArray<string> | null;
+  success: ReadonlyArray<boolean> | null;
+  errorCodes: ReadonlyArray<string> | null;
+  operationNames: ReadonlyArray<string> | null;
+  operationTypes: ReadonlyArray<string> | null;
+  subgraphNames: ReadonlyArray<string> | null;
+  httpStatusCodes: ReadonlyArray<string> | null;
+  httpMethods: ReadonlyArray<string> | null;
+  httpHosts: ReadonlyArray<string> | null;
+  httpRoutes: ReadonlyArray<string> | null;
+  httpUrls: ReadonlyArray<string> | null;
+};
+
+function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false) {
+  const ANDs: SqlValue[] = [];
+
+  if (filter?.period && !skipPeriod) {
+    const period = parseDateRangeInput(filter.period);
+    ANDs.push(
+      sql`"otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(period.from)}, 'UTC')`,
+    );
+    ANDs.push(
+      sql`"otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(period.to)}, 'UTC')`,
+    );
+  }
+
+  if (filter?.duration?.min) {
+    ANDs.push(sql`"duration" >= ${String(filter.duration.min * 1_000 * 1_000)}`);
+  }
+
+  if (filter?.duration?.max) {
+    ANDs.push(sql`"duration" <= ${String(filter.duration.max * 1_000 * 1_000)}`);
+  }
+
+  if (filter?.traceIds?.length) {
+    ANDs.push(sql`"trace_id" IN (${sql.array(filter.traceIds, 'String')})`);
+  }
+
+  // Success based on GraphQL terms
+  if (filter?.success?.length) {
+    const hasSuccess = filter.success.includes(true);
+    const hasError = filter.success.includes(false);
+
+    if (hasSuccess && !hasError) {
+      ANDs.push(sql`"graphql_error_count" = 0`);
+      ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
+    } else if (hasError && !hasSuccess) {
+      ANDs.push(sql`"graphql_error_count" > 0`);
+      ANDs.push(
+        sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
+      );
+    }
+  }
+
+  if (filter?.errorCodes?.length) {
+    ANDs.push(sql`hasAny("graphql_error_codes", (${sql.array(filter.errorCodes, 'String')}))`);
+  }
+
+  if (filter?.operationNames?.length) {
+    ANDs.push(sql`"graphql_operation_name" IN (${sql.array(filter.operationNames, 'String')})`);
+  }
+
+  if (filter?.operationTypes?.length) {
+    ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
+  }
+
+  if (filter?.subgraphNames?.length) {
+    ANDs.push(sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames, 'String')}))`);
+  }
+
+  if (filter?.httpStatusCodes?.length) {
+    ANDs.push(sql`"http_status_code" IN (${sql.array(filter.httpStatusCodes, 'String')})`);
+  }
+
+  if (filter?.httpMethods?.length) {
+    ANDs.push(sql`"http_method" IN (${sql.array(filter.httpMethods, 'String')})`);
+  }
+
+  if (filter?.httpHosts?.length) {
+    ANDs.push(sql`"http_host" IN (${sql.array(filter.httpHosts, 'String')})`);
+  }
+
+  if (filter?.httpRoutes?.length) {
+    ANDs.push(sql`"http_route" IN (${sql.array(filter.httpRoutes, 'String')})`);
+  }
+
+  if (filter?.httpUrls?.length) {
+    ANDs.push(sql`"http_url" IN (${sql.array(filter.httpUrls, 'String')})`);
+  }
+
+  return ANDs;
+}
+
 const TraceModel = z.object({
   traceId: z.string(),
   targetId: z.string().uuid(),
@@ -281,6 +361,18 @@ export type Trace = z.TypeOf<typeof TraceModel>;
 
 const TraceListModel = z.array(TraceModel);
 
+const IntFromString = z.string().transform(value => parseInt(value, 10));
+
+const TraceStatusBreakdownBucket = z.object({
+  timeBucket: z.string(),
+  okCountTotal: IntFromString,
+  errorCountTotal: IntFromString,
+  okCountFiltered: IntFromString,
+  errorCountFiltered: IntFromString,
+});
+
+const TraceStatusBreakdownBucketList = z.array(TraceStatusBreakdownBucket);
+
 const spanFields = sql`
   "TraceId" AS "traceId"
   , "SpanId" AS "spanId"
@@ -308,3 +400,47 @@ const SpanModel = z.object({
 const SpanListModel = z.array(SpanModel);
 
 export type Span = z.TypeOf<typeof SpanModel>;
+
+type BucketResult = {
+  unit: 'minutes' | 'hours' | 'days' | 'weeks' | 'months';
+  count: number;
+};
+
+function getBucketUnitAndCount(startDate: Date, endDate: Date): BucketResult {
+  const MS_IN = {
+    minute: 60 * 1000,
+    hour: 60 * 60 * 1000,
+    day: 24 * 60 * 60 * 1000,
+    week: 7 * 24 * 60 * 60 * 1000,
+  };
+
+  const diffMs = endDate.getTime() - startDate.getTime();
+  const diffMinutes = diffMs / MS_IN.minute;
+
+  let unit;
+  let count;
+
+  if (diffMinutes <= 60) {
+    unit = 'minutes';
+    count = Math.ceil(diffMs / MS_IN.minute);
+  } else if (diffMinutes <= 60 * 24) {
+    unit = 'hours';
+    count = Math.ceil(diffMs / MS_IN.hour);
+  } else if (diffMinutes <= 60 * 24 * 30) {
+    unit = 'days';
+    count = Math.ceil(diffMs / MS_IN.day);
+  } else if (diffMinutes <= 60 * 24 * 30 * 90) {
+    unit = 'weeks';
+    count = Math.ceil(diffMs / MS_IN.week);
+  } else {
+    unit = 'months';
+    // Calculate full months difference:
+    const startYear = startDate.getFullYear();
+    const startMonth = startDate.getMonth();
+    const endYear = endDate.getFullYear();
+    const endMonth = endDate.getMonth();
+    count = (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+  }
+
+  return { unit, count };
+}
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 9721805e75..fa8553a6a5 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -17,6 +17,7 @@ export const Target: Pick<
   | 'trace'
   | 'traces'
   | 'tracesFilterOptions'
+  | 'tracesStatusBreakdown'
 > = {
   totalRequests: (target, { period }, { injector }) => {
     return injector.get(OperationsManager).countRequests({
@@ -222,4 +223,26 @@ export const Target: Pick<
   trace(target, args, { injector }) {
     return injector.get(Traces).findTraceById(target.id, args.traceId);
   },
+  tracesStatusBreakdown: async (target, { filter }, { injector }) => {
+    return injector.get(Traces).getTraceStatusBreakdownForTargetId(target.id, {
+      period: filter?.period ?? null,
+      duration: filter?.duration
+        ? {
+            min: filter.duration.min ?? null,
+            max: filter.duration.max ?? null,
+          }
+        : null,
+      traceIds: filter?.traceIds ?? null,
+      success: filter?.success ?? null,
+      errorCodes: filter?.errorCodes ?? null,
+      operationNames: filter?.operationNames ?? null,
+      operationTypes: filter?.operationTypes ?? null,
+      subgraphNames: filter?.subgraphNames ?? null,
+      httpMethods: filter?.httpMethods ?? null,
+      httpStatusCodes: filter?.httpStatusCodes ?? null,
+      httpHosts: filter?.httpHosts ?? null,
+      httpRoutes: filter?.httpRoutes ?? null,
+      httpUrls: filter?.httpUrls ?? null,
+    });
+  },
 };
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 8e756e8d9a..0a19fafb34 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,7 +1,15 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import { AlertTriangle, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
+import {
+  AlertTriangle,
+  ArrowUpDown,
+  Clock,
+  ExternalLinkIcon,
+  // FilterIcon,
+  // SearchIcon,
+  XIcon,
+} from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
 import { useQuery } from 'urql';
 import { z } from 'zod';
@@ -15,6 +23,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
+// import { Input } from '@/components/ui/input';
 import { Meta } from '@/components/ui/meta';
 import { QueryError } from '@/components/ui/query-error';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
@@ -241,8 +250,26 @@ const chartConfig = {
   },
 } satisfies ChartConfig;
 
-const Traffic = memo(function Traffic() {
-  const data = chartData;
+const Traffic_TracesStatusBreakdownBucketFragment = graphql(`
+  fragment Traffic_TracesStatusBreakdownBucketFragment on TraceStatusBreakdownBucket {
+    timeBucket
+    okCountTotal
+    errorCountTotal
+    okCountFiltered
+    errorCountFiltered
+  }
+`);
+
+type TrafficProps = {
+  buckets: Array<FragmentType<typeof Traffic_TracesStatusBreakdownBucketFragment>>;
+};
+
+const Traffic = memo(function Traffic(props: TrafficProps) {
+  const buckets = useFragment(Traffic_TracesStatusBreakdownBucketFragment, props.buckets);
+  const data = buckets.map(b => ({
+    ...b,
+    timeBucket: b.timeBucket.substring(0, 10),
+  }));
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
   const [_, setZoomedData] = useState<typeof data | null>(null);
@@ -306,10 +333,10 @@ const Traffic = memo(function Traffic() {
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}
-        data={chartData}
+        data={data}
       >
         <XAxis
-          dataKey="date"
+          dataKey="timeBucket"
           tickLine={false}
           axisLine={false}
           tickMargin={8}
@@ -336,8 +363,8 @@ const Traffic = memo(function Traffic() {
             />
           }
         />
-        <Bar stackId="all" dataKey="ok" fill={`var(--color-ok)`} />
-        <Bar stackId="all" dataKey="error" fill={`var(--color-error)`} />
+        <Bar stackId="all" dataKey="okCountTotal" fill={`var(--color-ok)`} name="Ok" />
+        <Bar stackId="all" dataKey="errorCountTotal" fill={`var(--color-error)`} name="Error" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
         )}
@@ -1661,6 +1688,9 @@ const TargetTracesPageQuery = graphql(`
           count
         }
       }
+      tracesStatusBreakdown(filter: $filter) {
+        ...Traffic_TracesStatusBreakdownBucketFragment
+      }
     }
   }
 `);
@@ -1814,7 +1844,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
             <div>
               <SearchBar onFiltersOpenChange={() => setFiltersOpen(isOpen => !isOpen)} />
-              <Traffic />
+              <Traffic buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
             </div>
             <TracesList
               sorting={props.sorting}

From 8ed273ca5ba9f344cf93b789a14b1f60c938721a Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 3 Jul 2025 14:50:59 +0200
Subject: [PATCH 034/123] add a script for seeding otel data

---
 pnpm-lock.yaml                                |   3 +
 scripts/package.json                          |   3 +-
 scripts/seed-traces/README.md                 |  32 +
 scripts/seed-traces/intercept-server.mts      |  10 +
 scripts/seed-traces/sample-introspection.json | 504 +++++++++++
 scripts/seed-traces/sample-my-profile.json    | 825 ++++++++++++++++++
 .../seed-traces/sample-products-overview.json | 825 ++++++++++++++++++
 ...e-user-review-error-missing-variables.json | 373 ++++++++
 .../sample-user-review-not-found.json         | 505 +++++++++++
 scripts/seed-traces/sample-user-review.json   | 825 ++++++++++++++++++
 scripts/seed-traces/seed-traces.mts           | 686 +++++++++++++++
 11 files changed, 4590 insertions(+), 1 deletion(-)
 create mode 100644 scripts/seed-traces/README.md
 create mode 100644 scripts/seed-traces/intercept-server.mts
 create mode 100644 scripts/seed-traces/sample-introspection.json
 create mode 100644 scripts/seed-traces/sample-my-profile.json
 create mode 100644 scripts/seed-traces/sample-products-overview.json
 create mode 100644 scripts/seed-traces/sample-user-review-error-missing-variables.json
 create mode 100644 scripts/seed-traces/sample-user-review-not-found.json
 create mode 100644 scripts/seed-traces/sample-user-review.json
 create mode 100644 scripts/seed-traces/seed-traces.mts

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9fa48fc9c..a699849eb1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2182,6 +2182,9 @@ importers:
       '@graphql-hive/core':
         specifier: workspace:*
         version: link:../packages/libraries/core/dist
+      immer:
+        specifier: 10.1.1
+        version: 10.1.1
 
 packages:
 
diff --git a/scripts/package.json b/scripts/package.json
index 00532a2dd1..9238db33a1 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -3,6 +3,7 @@
   "type": "module",
   "private": true,
   "devDependencies": {
-    "@graphql-hive/core": "workspace:*"
+    "@graphql-hive/core": "workspace:*",
+    "immer": "10.1.1"
   }
 }
diff --git a/scripts/seed-traces/README.md b/scripts/seed-traces/README.md
new file mode 100644
index 0000000000..7000b5ce40
--- /dev/null
+++ b/scripts/seed-traces/README.md
@@ -0,0 +1,32 @@
+## Readme
+
+Each of the JSON file in this folder contains an array of requests sent to the otel-collector for
+the specific GraphQL operation.
+
+All the files will be parsed and used as a template for seeding the clickhouse database with somehow
+realistic trace data.
+
+### Usage
+
+- Create a federation target and publish our federation example
+  (https://the-guild.dev/graphql/hive/docs/get-started/apollo-federation).
+- Create a organization access token and target to which you want to push the data.
+
+Then run the following script:
+
+```
+HIVE_ORGANIZATION_ACCESS_TOKEN=hvo1/NWZmMGJjZmItODQxZS00ZmRiLWE4OTUtMzE3NDc2OWNhMGUwOjY2ZmM1NDI3ODRmYjFiMGYwODUyMWYwYmUyYjc1Yzk5NWM1ZTk0YWVlMzA4MTkxZGQ0NTFmZjcwNTRmM2IyMWY= \
+HIVE_TARGET_REF=the-guild/otel-demo/development \
+node --experimental-strip-types seed-traces-2.mts
+```
+
+You can adjust the amount of days you want to seed by setting `USAGE_DAYS` (e.g. `USAGE_DAYS=5` will
+seed the last 5 days). By default we seed the last 14 days.
+
+You can adjust how frequent the reporting interval is by setting `USAGE_INTERVAL` (e.g.
+`USAGE_DAYS=20`). By default the value is 20 (minutes).
+
+### Adding more fixtures
+
+In case you want to add additional traces starte the intercept server (`interspect-service.mts`),
+point the gateway to that endpoint and copy the output to a new file within this folder.
diff --git a/scripts/seed-traces/intercept-server.mts b/scripts/seed-traces/intercept-server.mts
new file mode 100644
index 0000000000..a146229ec9
--- /dev/null
+++ b/scripts/seed-traces/intercept-server.mts
@@ -0,0 +1,10 @@
+import * as http from 'node:http';
+import * as foo from '@whatwg-node/server';
+
+const adapter = foo.createServerAdapter(async request => {
+  console.log(JSON.stringify(await request.json(), null, 2));
+
+  return new Response('{}');
+});
+
+http.createServer(adapter).listen(9898);
diff --git a/scripts/seed-traces/sample-introspection.json b/scripts/seed-traces/sample-introspection.json
new file mode 100644
index 0000000000..bc0876473f
--- /dev/null
+++ b/scripts/seed-traces/sample-introspection.json
@@ -0,0 +1,504 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "d72a6b878beb3fee4287243c1c51ebaa",
+                "spanId": "bf7578eaabcd9963",
+                "name": "GET /graphql",
+                "kind": 2,
+                "startTimeUnixNano": "1751541577026000000",
+                "endTimeUnixNano": "1751541577027457584",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "GET"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql?query=query+TopProductsOverview+%7B%0A++topProducts+%7B%0A++++name%0A++++upc%0A++++price%0A++++weight%0A++++reviews+%7B%0A++++++id%0A++++++body%0A++++++author+%7B%0A++++++++id%0A++++++++username%0A++++++++name%0A++++++%7D%0A++++%7D%0A++%7D%0A%7D"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "6045da1fe92d42a36f0ffdcca55efa46",
+                "spanId": "17fd8c5b3d731702",
+                "parentSpanId": "b763ec1ad8a305ca",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541577186000000",
+                "endTimeUnixNano": "1751541577337256209",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "6045da1fe92d42a36f0ffdcca55efa46",
+                "spanId": "b763ec1ad8a305ca",
+                "name": "gateway.initialization",
+                "kind": 1,
+                "startTimeUnixNano": "1751541567757845981",
+                "endTimeUnixNano": "1751541577382000000",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "GET"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://host.docker.internal:3001/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "host.docker.internal"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "host.docker.internal:3001"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "c55a1a27cfe0a563",
+                "parentSpanId": "6df96e8ebb5f3dd7",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541577384000000",
+                "endTimeUnixNano": "1751541577385261166",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "IntrospectionQuery"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "ca97bb80da3c0dbe",
+                "parentSpanId": "6df96e8ebb5f3dd7",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541577385000000",
+                "endTimeUnixNano": "1751541577397343958",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "IntrospectionQuery"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "697d38f300df2167",
+                "parentSpanId": "6df96e8ebb5f3dd7",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541577398000000",
+                "endTimeUnixNano": "1751541577399414208",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "f479d33b7320cd0f",
+                "parentSpanId": "6df96e8ebb5f3dd7",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541577400000000",
+                "endTimeUnixNano": "1751541577410081959",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "IntrospectionQuery"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "6df96e8ebb5f3dd7",
+                "parentSpanId": "af8929e2e40e00af",
+                "name": "graphql.operation IntrospectionQuery",
+                "kind": 1,
+                "startTimeUnixNano": "1751541577382000000",
+                "endTimeUnixNano": "1751541577409557042",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "IntrospectionQuery"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "f42cb37f3811f650f06ca078e7c6625f",
+                "spanId": "af8929e2e40e00af",
+                "name": "query IntrospectionQuery",
+                "kind": 2,
+                "startTimeUnixNano": "1751541577154000000",
+                "endTimeUnixNano": "1751541577412387709",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "IntrospectionQuery"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 0
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/sample-my-profile.json b/scripts/seed-traces/sample-my-profile.json
new file mode 100644
index 0000000000..1e36fb22fc
--- /dev/null
+++ b/scripts/seed-traces/sample-my-profile.json
@@ -0,0 +1,825 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "a64ae7143330edd5",
+                "parentSpanId": "53b24c8e7ff72fa4",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541696992000000",
+                "endTimeUnixNano": "1751541696992404084",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "a58c9a61e1c74cee",
+                "parentSpanId": "53b24c8e7ff72fa4",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541696993000000",
+                "endTimeUnixNano": "1751541696994822625",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "8fc953974f3a8242",
+                "parentSpanId": "53b24c8e7ff72fa4",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541696994000000",
+                "endTimeUnixNano": "1751541696994156500",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "cb49bd18a410f719ead0c10bfe092361",
+                "spanId": "36a0e4ee75933806",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541696985000000",
+                "endTimeUnixNano": "1751541697138885000",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "db7a050eb7c01cc6",
+                "parentSpanId": "53e7ea110fc140bc",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697013000000",
+                "endTimeUnixNano": "1751541697246498001",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/users"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/users"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "53e7ea110fc140bc",
+                "parentSpanId": "5950033302028628",
+                "name": "subgraph.execute (users)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697012000000",
+                "endTimeUnixNano": "1751541697247851792",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile{__typename me{__typename id id username name}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query MyProfile{__typename me{__typename id id username name}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "600df68244bcc074",
+                "parentSpanId": "3fa530a61e87352d",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697254000000",
+                "endTimeUnixNano": "1751541697287733167",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/reviews"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/reviews"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "3fa530a61e87352d",
+                "parentSpanId": "5950033302028628",
+                "name": "subgraph.execute (reviews)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697254000000",
+                "endTimeUnixNano": "1751541697288384625",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "e6f23702d0c6dca1",
+                "parentSpanId": "01288c4b66e39646",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697291000000",
+                "endTimeUnixNano": "1751541697328195667",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/products"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/products"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "01288c4b66e39646",
+                "parentSpanId": "5950033302028628",
+                "name": "subgraph.execute (products)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541697291000000",
+                "endTimeUnixNano": "1751541697328841166",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "5950033302028628",
+                "parentSpanId": "53b24c8e7ff72fa4",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541696995000000",
+                "endTimeUnixNano": "1751541697329399042",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "53b24c8e7ff72fa4",
+                "parentSpanId": "af9ade51d3bdaa1e",
+                "name": "graphql.operation MyProfile",
+                "kind": 1,
+                "startTimeUnixNano": "1751541696992000000",
+                "endTimeUnixNano": "1751541697329427167",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "807b71f8b7b4f9c827ce8220c6540eac",
+                "spanId": "af9ade51d3bdaa1e",
+                "name": "query MyProfile",
+                "kind": 2,
+                "startTimeUnixNano": "1751541696982000000",
+                "endTimeUnixNano": "1751541697329384584",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.names",
+                    "value": {
+                      "stringValue": "users,reviews,products"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "MyProfile"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 0
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/sample-products-overview.json b/scripts/seed-traces/sample-products-overview.json
new file mode 100644
index 0000000000..954fdde797
--- /dev/null
+++ b/scripts/seed-traces/sample-products-overview.json
@@ -0,0 +1,825 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "1b80c5676106d88c",
+                "parentSpanId": "94c73be93cd98d46",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541486715000000",
+                "endTimeUnixNano": "1751541486715238750",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "d7d5f35afa053c99",
+                "parentSpanId": "94c73be93cd98d46",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541486715000000",
+                "endTimeUnixNano": "1751541486715310750",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "2ea02406bc1b76d1",
+                "parentSpanId": "94c73be93cd98d46",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541486716000000",
+                "endTimeUnixNano": "1751541486716082041",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "6869ef8f8ce5f8a16b1e8f1f0b26e7d9",
+                "spanId": "1bcf46d2b47df769",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486712000000",
+                "endTimeUnixNano": "1751541486821788833",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "4b3aa6b08fd35de1",
+                "parentSpanId": "2707eb31347c2542",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486718000000",
+                "endTimeUnixNano": "1751541486925992541",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/products"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/products"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "2707eb31347c2542",
+                "parentSpanId": "0deba53eb2628007",
+                "name": "subgraph.execute (products)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486718000000",
+                "endTimeUnixNano": "1751541486926520250",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($first:Int){__typename topProducts(first:$first){__typename upc name upc price weight}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($first:Int){__typename topProducts(first:$first){__typename upc name upc price weight}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "f81b8ed0b08b23f7",
+                "parentSpanId": "233473cfb358e83f",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486928000000",
+                "endTimeUnixNano": "1751541486959338875",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/reviews"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/reviews"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "233473cfb358e83f",
+                "parentSpanId": "0deba53eb2628007",
+                "name": "subgraph.execute (reviews)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486927000000",
+                "endTimeUnixNano": "1751541486959231209",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc reviews{__typename id id body author{username __typename __typename id id}}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc reviews{__typename id id body author{username __typename __typename id id}}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "f8652f4f214127da",
+                "parentSpanId": "6bfe00463408e3de",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486962000000",
+                "endTimeUnixNano": "1751541486998254500",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/users"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/users"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "6bfe00463408e3de",
+                "parentSpanId": "0deba53eb2628007",
+                "name": "subgraph.execute (users)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541486961000000",
+                "endTimeUnixNano": "1751541486998039417",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id name}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id name}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "0deba53eb2628007",
+                "parentSpanId": "94c73be93cd98d46",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541486716000000",
+                "endTimeUnixNano": "1751541486999119791",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "94c73be93cd98d46",
+                "parentSpanId": "93b59a82d5aab081",
+                "name": "graphql.operation TopProductsOverview",
+                "kind": 1,
+                "startTimeUnixNano": "1751541486715000000",
+                "endTimeUnixNano": "1751541486999203084",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "beec0bf1fc0eed2ef7721f6b4827be86",
+                "spanId": "93b59a82d5aab081",
+                "name": "query TopProductsOverview",
+                "kind": 2,
+                "startTimeUnixNano": "1751541486711000000",
+                "endTimeUnixNano": "1751541486998914125",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.names",
+                    "value": {
+                      "stringValue": "products,reviews,users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "TopProductsOverview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 0
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/sample-user-review-error-missing-variables.json b/scripts/seed-traces/sample-user-review-error-missing-variables.json
new file mode 100644
index 0000000000..0661ca6047
--- /dev/null
+++ b/scripts/seed-traces/sample-user-review-error-missing-variables.json
@@ -0,0 +1,373 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "0424db5a14505873",
+                "parentSpanId": "80d07c2b29e6a98f",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541923666000000",
+                "endTimeUnixNano": "1751541923666275959",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "c2b0e3a5107b7d8d",
+                "parentSpanId": "80d07c2b29e6a98f",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541923666000000",
+                "endTimeUnixNano": "1751541923666099959",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "51a8cf06eab30356",
+                "parentSpanId": "80d07c2b29e6a98f",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541923666000000",
+                "endTimeUnixNano": "1751541923666065666",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "262de13a78519369",
+                "parentSpanId": "80d07c2b29e6a98f",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541923666000000",
+                "endTimeUnixNano": "1751541923667922500",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.error.count",
+                    "value": {
+                      "intValue": 1
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [
+                  {
+                    "attributes": [
+                      {
+                        "key": "exception.type",
+                        "value": {
+                          "stringValue": "GraphQLError"
+                        }
+                      },
+                      {
+                        "key": "exception.message",
+                        "value": {
+                          "stringValue": "Variable \"$id\" of required type \"ID!\" was not provided."
+                        }
+                      },
+                      {
+                        "key": "exception.stacktrace",
+                        "value": {
+                          "stringValue": "GraphQLError: Variable \"$id\" of required type \"ID!\" was not provided.\n    at createGraphQLError (file:///node_modules/.chunk/abortSignalAny-BG8Lg0X_.mjs:29:12)\n    at coerceVariableValues (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:566:25)\n    at getVariableValues (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:533:25)\n    at buildExecutionContext (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:746:35)\n    at execute (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:615:24)\n    at file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:1960:37\n    at Promise.then (file:///node_modules/.chunk/index-DYl9M8N-.mjs:31:40)\n    at handleMaybePromise (file:///node_modules/.chunk/index-DYl9M8N-.mjs:10:33)\n    at normalizedExecutor (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:1960:12)\n    at _4.args (file:///node_modules/.chunk/use-engine-CPlZaEw6.mjs:580:17)"
+                        }
+                      }
+                    ],
+                    "name": "exception",
+                    "timeUnixNano": "1751541923667636834",
+                    "droppedAttributesCount": 0
+                  }
+                ],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 2,
+                  "message": "Variable \"$id\" of required type \"ID!\" was not provided."
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "80d07c2b29e6a98f",
+                "parentSpanId": "86ebca8621ea012f",
+                "name": "graphql.operation UserReview",
+                "kind": 1,
+                "startTimeUnixNano": "1751541923665000000",
+                "endTimeUnixNano": "1751541923667755750",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "b05d5ce706fe45f33fd02f12ff2b538c",
+                "spanId": "86ebca8621ea012f",
+                "name": "query UserReview",
+                "kind": 2,
+                "startTimeUnixNano": "1751541923662000000",
+                "endTimeUnixNano": "1751541923668269583",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 1
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 400
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 2,
+                  "message": "Bad Request"
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "28023847cc58b3c3fb9c163f6eab92b2",
+                "spanId": "0e237fa205aed49f",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541923663000000",
+                "endTimeUnixNano": "1751541923768741667",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/sample-user-review-not-found.json b/scripts/seed-traces/sample-user-review-not-found.json
new file mode 100644
index 0000000000..59c8ace87c
--- /dev/null
+++ b/scripts/seed-traces/sample-user-review-not-found.json
@@ -0,0 +1,505 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "1a647eb9b4147b10",
+                "parentSpanId": "608141aa264650c6",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541851834000000",
+                "endTimeUnixNano": "1751541851834925292",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "2225b5183449d944",
+                "parentSpanId": "608141aa264650c6",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541851836000000",
+                "endTimeUnixNano": "1751541851838385167",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "22a0be695f656a93",
+                "parentSpanId": "608141aa264650c6",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541851838000000",
+                "endTimeUnixNano": "1751541851838188625",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "1601ed274ede73e8900daf9125e7e1f6",
+                "spanId": "293e53edace6b4a8",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541851833000000",
+                "endTimeUnixNano": "1751541851947102917",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "f567c64730c382b4",
+                "parentSpanId": "49624b099fea77b7",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541851841000000",
+                "endTimeUnixNano": "1751541852120716584",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/users"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/users"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "49624b099fea77b7",
+                "parentSpanId": "c0d8db7a0d7cd325",
+                "name": "subgraph.execute (users)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541851840000000",
+                "endTimeUnixNano": "1751541852121396834",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "c0d8db7a0d7cd325",
+                "parentSpanId": "608141aa264650c6",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541851838000000",
+                "endTimeUnixNano": "1751541852121068708",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "608141aa264650c6",
+                "parentSpanId": "9bacab5be0803b57",
+                "name": "graphql.operation UserReview",
+                "kind": 1,
+                "startTimeUnixNano": "1751541851834000000",
+                "endTimeUnixNano": "1751541852121572417",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "395970847a47f14794c1c1af2499eb94",
+                "spanId": "9bacab5be0803b57",
+                "name": "query UserReview",
+                "kind": 2,
+                "startTimeUnixNano": "1751541851832000000",
+                "endTimeUnixNano": "1751541852121678542",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.names",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 0
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/sample-user-review.json b/scripts/seed-traces/sample-user-review.json
new file mode 100644
index 0000000000..38c16e1c5e
--- /dev/null
+++ b/scripts/seed-traces/sample-user-review.json
@@ -0,0 +1,825 @@
+[
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "8e7742a266dfa50e",
+                "parentSpanId": "b0d7fd9d6fc79c8e",
+                "name": "graphql.parse",
+                "kind": 1,
+                "startTimeUnixNano": "1751541997641000000",
+                "endTimeUnixNano": "1751541997641163583",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "88da58c0b0307abc",
+                "parentSpanId": "b0d7fd9d6fc79c8e",
+                "name": "graphql.validate",
+                "kind": 1,
+                "startTimeUnixNano": "1751541997642000000",
+                "endTimeUnixNano": "1751541997642059625",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "8b990366087e0267",
+                "parentSpanId": "b0d7fd9d6fc79c8e",
+                "name": "graphql.context",
+                "kind": 1,
+                "startTimeUnixNano": "1751541997642000000",
+                "endTimeUnixNano": "1751541997642070875",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "2057b212e70318a1e6372842982b6f32",
+                "spanId": "be8b5db997a5ba76",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997639000000",
+                "endTimeUnixNano": "1751541997753010916",
+                "attributes": [],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "a082a6e591be0dc0",
+                "parentSpanId": "034aa685d1130fa9",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997644000000",
+                "endTimeUnixNano": "1751541997808645667",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/users"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/users"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "034aa685d1130fa9",
+                "parentSpanId": "4709e78906f7ee93",
+                "name": "subgraph.execute (users)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997643000000",
+                "endTimeUnixNano": "1751541997808068667",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "users"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "0cbf86b7f4e5a251",
+                "parentSpanId": "879cef6dd0df538d",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997811000000",
+                "endTimeUnixNano": "1751541997859345000",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/reviews"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/reviews"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "879cef6dd0df538d",
+                "parentSpanId": "4709e78906f7ee93",
+                "name": "subgraph.execute (reviews)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997810000000",
+                "endTimeUnixNano": "1751541997859110458",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}body}}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "reviews"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}body}}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "resourceSpans": [
+      {
+        "resource": {
+          "attributes": [
+            {
+              "key": "service.name",
+              "value": {
+                "stringValue": "hive-gateway"
+              }
+            },
+            {
+              "key": "service.version",
+              "value": {
+                "stringValue": "5.13.4"
+              }
+            }
+          ],
+          "droppedAttributesCount": 0
+        },
+        "scopeSpans": [
+          {
+            "scope": {
+              "name": "gateway"
+            },
+            "spans": [
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "242481d587116eb4",
+                "parentSpanId": "37bb599ff9427274",
+                "name": "http.fetch",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997861000000",
+                "endTimeUnixNano": "1751541997902277625",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "https://federation-demo.theguild.workers.dev/products"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "federation-demo.theguild.workers.dev"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/products"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "https:"
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "37bb599ff9427274",
+                "parentSpanId": "4709e78906f7ee93",
+                "name": "subgraph.execute (products)",
+                "kind": 3,
+                "startTimeUnixNano": "1751541997861000000",
+                "endTimeUnixNano": "1751541997903041792",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name weight}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.upstream.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.name",
+                    "value": {
+                      "stringValue": "products"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name weight}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "4709e78906f7ee93",
+                "parentSpanId": "b0d7fd9d6fc79c8e",
+                "name": "graphql.execute",
+                "kind": 1,
+                "startTimeUnixNano": "1751541997642000000",
+                "endTimeUnixNano": "1751541997903080750",
+                "attributes": [
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "b0d7fd9d6fc79c8e",
+                "parentSpanId": "bbc7518b553093df",
+                "name": "graphql.operation UserReview",
+                "kind": 1,
+                "startTimeUnixNano": "1751541997641000000",
+                "endTimeUnixNano": "1751541997902778250",
+                "attributes": [
+                  {
+                    "key": "graphql.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 0
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              },
+              {
+                "traceId": "8f7b3cc381c16ab7a1ff9f5e95b7076b",
+                "spanId": "bbc7518b553093df",
+                "name": "query UserReview",
+                "kind": 2,
+                "startTimeUnixNano": "1751541997638000000",
+                "endTimeUnixNano": "1751541997902695084",
+                "attributes": [
+                  {
+                    "key": "http.method",
+                    "value": {
+                      "stringValue": "POST"
+                    }
+                  },
+                  {
+                    "key": "http.url",
+                    "value": {
+                      "stringValue": "http://localhost:4000/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.route",
+                    "value": {
+                      "stringValue": "/graphql"
+                    }
+                  },
+                  {
+                    "key": "http.scheme",
+                    "value": {
+                      "stringValue": "http:"
+                    }
+                  },
+                  {
+                    "key": "net.host.name",
+                    "value": {
+                      "stringValue": "localhost"
+                    }
+                  },
+                  {
+                    "key": "http.host",
+                    "value": {
+                      "stringValue": "localhost:4000"
+                    }
+                  },
+                  {
+                    "key": "http.user_agent",
+                    "value": {
+                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
+                    }
+                  },
+                  {
+                    "key": "hive.subgraph.names",
+                    "value": {
+                      "stringValue": "users,reviews,products"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.type",
+                    "value": {
+                      "stringValue": "query"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.name",
+                    "value": {
+                      "stringValue": "UserReview"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.operation.document",
+                    "value": {
+                      "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
+                    }
+                  },
+                  {
+                    "key": "hive.graphql.error.count",
+                    "value": {
+                      "intValue": 0
+                    }
+                  },
+                  {
+                    "key": "http.status_code",
+                    "value": {
+                      "intValue": 200
+                    }
+                  },
+                  {
+                    "key": "gateway.cache.response_cache",
+                    "value": {
+                      "stringValue": "miss"
+                    }
+                  }
+                ],
+                "droppedAttributesCount": 0,
+                "events": [],
+                "droppedEventsCount": 0,
+                "status": {
+                  "code": 1
+                },
+                "links": [],
+                "droppedLinksCount": 0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
new file mode 100644
index 0000000000..0b48da91c0
--- /dev/null
+++ b/scripts/seed-traces/seed-traces.mts
@@ -0,0 +1,686 @@
+import * as crypto from 'node:crypto';
+import * as fs from 'node:fs/promises';
+import * as path from 'node:path';
+import * as date from 'date-fns';
+import * as immer from 'immer';
+
+// This is just copy pasted here to infer the TS type
+// Please feel free to collapse this section.
+const reference = [
+  {
+    resourceSpans: [
+      {
+        resource: {
+          attributes: [
+            {
+              key: 'service.name',
+              value: {
+                stringValue: 'hive-gateway',
+              },
+            },
+            {
+              key: 'service.version',
+              value: {
+                stringValue: '5.13.4',
+              },
+            },
+          ],
+          droppedAttributesCount: 0,
+        },
+        scopeSpans: [
+          {
+            scope: {
+              name: 'gateway',
+            },
+            spans: [
+              {
+                traceId: 'd72a6b878beb3fee4287243c1c51ebaa',
+                spanId: 'bf7578eaabcd9963',
+                name: 'GET /graphql',
+                kind: 2,
+                startTimeUnixNano: '1751541577026000000',
+                endTimeUnixNano: '1751541577027457584',
+                attributes: [
+                  {
+                    key: 'http.method',
+                    value: {
+                      stringValue: 'GET',
+                    },
+                  },
+                  {
+                    key: 'http.url',
+                    value: {
+                      stringValue:
+                        'http://localhost:4000/graphql?query=query+TopProductsOverview+%7B%0A++topProducts+%7B%0A++++name%0A++++upc%0A++++price%0A++++weight%0A++++reviews+%7B%0A++++++id%0A++++++body%0A++++++author+%7B%0A++++++++id%0A++++++++username%0A++++++++name%0A++++++%7D%0A++++%7D%0A++%7D%0A%7D',
+                    },
+                  },
+                  {
+                    key: 'http.route',
+                    value: {
+                      stringValue: '/graphql',
+                    },
+                  },
+                  {
+                    key: 'http.scheme',
+                    value: {
+                      stringValue: 'http:',
+                    },
+                  },
+                  {
+                    key: 'net.host.name',
+                    value: {
+                      stringValue: 'localhost',
+                    },
+                  },
+                  {
+                    key: 'http.host',
+                    value: {
+                      stringValue: 'localhost:4000',
+                    },
+                  },
+                  {
+                    key: 'http.user_agent',
+                    value: {
+                      stringValue:
+                        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36',
+                    },
+                  },
+                  {
+                    key: 'http.status_code',
+                    value: {
+                      intValue: 200,
+                    },
+                  },
+                  {
+                    key: 'gateway.cache.response_cache',
+                    value: {
+                      stringValue: 'miss',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 1,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    resourceSpans: [
+      {
+        resource: {
+          attributes: [
+            {
+              key: 'service.name',
+              value: {
+                stringValue: 'hive-gateway',
+              },
+            },
+            {
+              key: 'service.version',
+              value: {
+                stringValue: '5.13.4',
+              },
+            },
+          ],
+          droppedAttributesCount: 0,
+        },
+        scopeSpans: [
+          {
+            scope: {
+              name: 'gateway',
+            },
+            spans: [
+              {
+                traceId: '6045da1fe92d42a36f0ffdcca55efa46',
+                spanId: '17fd8c5b3d731702',
+                parentSpanId: 'b763ec1ad8a305ca',
+                name: 'http.fetch',
+                kind: 3,
+                startTimeUnixNano: '1751541577186000000',
+                endTimeUnixNano: '1751541577337256209',
+                attributes: [],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    resourceSpans: [
+      {
+        resource: {
+          attributes: [
+            {
+              key: 'service.name',
+              value: {
+                stringValue: 'hive-gateway',
+              },
+            },
+            {
+              key: 'service.version',
+              value: {
+                stringValue: '5.13.4',
+              },
+            },
+          ],
+          droppedAttributesCount: 0,
+        },
+        scopeSpans: [
+          {
+            scope: {
+              name: 'gateway',
+            },
+            spans: [
+              {
+                traceId: '6045da1fe92d42a36f0ffdcca55efa46',
+                spanId: 'b763ec1ad8a305ca',
+                name: 'gateway.initialization',
+                kind: 1,
+                startTimeUnixNano: '1751541567757845981',
+                endTimeUnixNano: '1751541577382000000',
+                attributes: [
+                  {
+                    key: 'http.method',
+                    value: {
+                      stringValue: 'GET',
+                    },
+                  },
+                  {
+                    key: 'http.url',
+                    value: {
+                      stringValue:
+                        'http://host.docker.internal:3001/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph',
+                    },
+                  },
+                  {
+                    key: 'net.host.name',
+                    value: {
+                      stringValue: 'host.docker.internal',
+                    },
+                  },
+                  {
+                    key: 'http.host',
+                    value: {
+                      stringValue: 'host.docker.internal:3001',
+                    },
+                  },
+                  {
+                    key: 'http.route',
+                    value: {
+                      stringValue: '/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph',
+                    },
+                  },
+                  {
+                    key: 'http.scheme',
+                    value: {
+                      stringValue: 'http:',
+                    },
+                  },
+                  {
+                    key: 'http.status_code',
+                    value: {
+                      intValue: 200,
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 1,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: 'c55a1a27cfe0a563',
+                parentSpanId: '6df96e8ebb5f3dd7',
+                name: 'graphql.parse',
+                kind: 1,
+                startTimeUnixNano: '1751541577384000000',
+                endTimeUnixNano: '1751541577385261166',
+                attributes: [
+                  {
+                    key: 'graphql.document',
+                    value: {
+                      stringValue:
+                        'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',
+                    },
+                  },
+                  {
+                    key: 'graphql.operation.name',
+                    value: {
+                      stringValue: 'IntrospectionQuery',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: 'ca97bb80da3c0dbe',
+                parentSpanId: '6df96e8ebb5f3dd7',
+                name: 'graphql.validate',
+                kind: 1,
+                startTimeUnixNano: '1751541577385000000',
+                endTimeUnixNano: '1751541577397343958',
+                attributes: [
+                  {
+                    key: 'graphql.document',
+                    value: {
+                      stringValue:
+                        'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',
+                    },
+                  },
+                  {
+                    key: 'graphql.operation.name',
+                    value: {
+                      stringValue: 'IntrospectionQuery',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: '697d38f300df2167',
+                parentSpanId: '6df96e8ebb5f3dd7',
+                name: 'graphql.context',
+                kind: 1,
+                startTimeUnixNano: '1751541577398000000',
+                endTimeUnixNano: '1751541577399414208',
+                attributes: [],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: 'f479d33b7320cd0f',
+                parentSpanId: '6df96e8ebb5f3dd7',
+                name: 'graphql.execute',
+                kind: 1,
+                startTimeUnixNano: '1751541577400000000',
+                endTimeUnixNano: '1751541577410081959',
+                attributes: [
+                  {
+                    key: 'graphql.operation.type',
+                    value: {
+                      stringValue: 'query',
+                    },
+                  },
+                  {
+                    key: 'graphql.operation.name',
+                    value: {
+                      stringValue: 'IntrospectionQuery',
+                    },
+                  },
+                  {
+                    key: 'graphql.document',
+                    value: {
+                      stringValue:
+                        'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: '6df96e8ebb5f3dd7',
+                parentSpanId: 'af8929e2e40e00af',
+                name: 'graphql.operation IntrospectionQuery',
+                kind: 1,
+                startTimeUnixNano: '1751541577382000000',
+                endTimeUnixNano: '1751541577409557042',
+                attributes: [
+                  {
+                    key: 'graphql.document',
+                    value: {
+                      stringValue:
+                        'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',
+                    },
+                  },
+                  {
+                    key: 'graphql.operation.name',
+                    value: {
+                      stringValue: 'IntrospectionQuery',
+                    },
+                  },
+                  {
+                    key: 'graphql.operation.type',
+                    value: {
+                      stringValue: 'query',
+                    },
+                  },
+                  {
+                    key: 'gateway.cache.response_cache',
+                    value: {
+                      stringValue: 'miss',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 0,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+              {
+                traceId: 'f42cb37f3811f650f06ca078e7c6625f',
+                spanId: 'af8929e2e40e00af',
+                name: 'query IntrospectionQuery',
+                kind: 2,
+                startTimeUnixNano: '1751541577154000000',
+                endTimeUnixNano: '1751541577412387709',
+                attributes: [
+                  {
+                    key: 'http.method',
+                    value: {
+                      stringValue: 'POST',
+                    },
+                  },
+                  {
+                    key: 'http.url',
+                    value: {
+                      stringValue: 'http://localhost:4000/graphql',
+                    },
+                  },
+                  {
+                    key: 'http.route',
+                    value: {
+                      stringValue: '/graphql',
+                    },
+                  },
+                  {
+                    key: 'http.scheme',
+                    value: {
+                      stringValue: 'http:',
+                    },
+                  },
+                  {
+                    key: 'net.host.name',
+                    value: {
+                      stringValue: 'localhost',
+                    },
+                  },
+                  {
+                    key: 'http.host',
+                    value: {
+                      stringValue: 'localhost:4000',
+                    },
+                  },
+                  {
+                    key: 'http.user_agent',
+                    value: {
+                      stringValue:
+                        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36',
+                    },
+                  },
+                  {
+                    key: 'hive.graphql.operation.type',
+                    value: {
+                      stringValue: 'query',
+                    },
+                  },
+                  {
+                    key: 'hive.graphql.operation.name',
+                    value: {
+                      stringValue: 'IntrospectionQuery',
+                    },
+                  },
+                  {
+                    key: 'hive.graphql.operation.document',
+                    value: {
+                      stringValue:
+                        'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',
+                    },
+                  },
+                  {
+                    key: 'hive.graphql.error.count',
+                    value: {
+                      intValue: 0,
+                    },
+                  },
+                  {
+                    key: 'http.status_code',
+                    value: {
+                      intValue: 200,
+                    },
+                  },
+                  {
+                    key: 'gateway.cache.response_cache',
+                    value: {
+                      stringValue: 'miss',
+                    },
+                  },
+                ],
+                droppedAttributesCount: 0,
+                events: [],
+                droppedEventsCount: 0,
+                status: {
+                  code: 1,
+                },
+                links: [],
+                droppedLinksCount: 0,
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+type Reference = typeof reference;
+
+function randomId(len = 32) {
+  return crypto.randomBytes(len / 2).toString('hex');
+}
+
+function toTimeUnixNano(date = new Date()) {
+  const milliseconds = date.getTime(); // ms since epoch
+  const nanoseconds = BigInt(milliseconds) * 1_000_000n; // ns = ms × 1_000_000
+  return nanoseconds;
+}
+
+function mutate(currentTime: Date, reference: Reference) {
+  const newTraceId = randomId();
+  const newSpanIds = new Map<string, string>();
+
+  function getNewSpanId(spanId: string) {
+    let newSpanId = newSpanIds.get(spanId);
+    if (!newSpanId) {
+      newSpanId = randomId(16);
+      newSpanIds.set(spanId, newSpanId);
+    }
+
+    return newSpanId;
+  }
+
+  let rootTrace:
+    | Reference[number]['resourceSpans'][number]['scopeSpans'][number]['spans'][number]
+    | null = null;
+
+  for (const payload of reference) {
+    for (const resourceSpan of payload.resourceSpans) {
+      for (const scopeSpan of resourceSpan.scopeSpans) {
+        for (const span of scopeSpan.spans) {
+          if (span.parentSpanId === undefined) {
+            rootTrace = span;
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  if (!rootTrace) {
+    throw new Error('Parent Span must always be the first span in the file.');
+  }
+
+  const startTime = BigInt(rootTrace.startTimeUnixNano);
+  const currentTimeB = toTimeUnixNano(currentTime);
+
+  for (const payload of reference) {
+    for (const span of payload.resourceSpans[0].scopeSpans[0].spans) {
+      if (span.parentSpanId) {
+        span.parentSpanId = getNewSpanId(span.parentSpanId);
+      }
+      span.spanId = getNewSpanId(span.spanId);
+      span.traceId = newTraceId;
+
+      const spanStartTime = BigInt(span.startTimeUnixNano);
+      const spanEndTime = BigInt(span.endTimeUnixNano);
+      const spanDuration = spanEndTime - spanStartTime;
+      const spanOffset = spanStartTime - startTime;
+      const newStartTime = currentTimeB + spanOffset;
+      span.startTimeUnixNano = newStartTime.toString();
+      span.endTimeUnixNano = (newStartTime + spanDuration).toString();
+    }
+  }
+}
+
+function createTrace(date: Date, reference: Reference) {
+  return immer.produce(reference, draft => mutate(date, draft));
+}
+
+const __dirname = import.meta.dirname;
+
+const seedFolder = path.join(__dirname);
+
+const files = await fs.readdir(seedFolder);
+
+const references: Array<Reference> = [];
+
+console.log(`Load samples from the '${seedFolder}' folder.`);
+for (const file of files) {
+  if (!file.startsWith('sample-') || !file.endsWith('.json')) {
+    console.log('Skip ' + file);
+    continue;
+  }
+  console.log('Load' + file);
+  references.push(JSON.parse(await fs.readFile(path.join(seedFolder, file), 'utf-8')));
+}
+
+console.log(`Loaded ${references.length} references.`);
+
+if (references.length === 0) {
+  throw new Error('No references where found.');
+}
+
+const USAGE_DAYS = process.env.USAGE_DAYS || '14';
+console.log(
+  `Seeding usage for the last ${USAGE_DAYS} day(s). (Overwrite using the USAGE_DAYS environment variable)`,
+);
+const USAGE_INTERVAL = process.env.USAGE_INTERVAL || '20';
+console.log(
+  `Seeding every ${USAGE_INTERVAL} minute(s). (Overwrite using the USAGE_INTERVAL environment variable)`,
+);
+
+const otelEndpointUrl = process.env.OTEL_ENDPOINT || 'http://localhost:4318/v1/traces';
+console.log(
+  `Endpoint: ${otelEndpointUrl}. (Overwrite using the OTEL_ENDPOINT environment variable)`,
+);
+
+const HIVE_ORGANIZATION_ACCESS_TOKEN = process.env.HIVE_ORGANIZATION_ACCESS_TOKEN;
+if (!HIVE_ORGANIZATION_ACCESS_TOKEN) {
+  throw new Error('Environment variable HIVE_ORGANIZATION_ACCESS_TOKEN is missing.');
+}
+
+const HIVE_TARGET_REF = process.env.HIVE_TARGET_REF;
+if (!HIVE_TARGET_REF) {
+  throw new Error('Environment variable HIVE_TARGET_REF is missing.');
+}
+
+const intervalMinutes = parseInt(USAGE_INTERVAL, 10);
+const usageDays = parseInt(USAGE_DAYS, 10);
+const now = new Date();
+let currentDate = date.subDays(now, usageDays);
+
+while (currentDate.getTime() < now.getTime()) {
+  console.log(currentDate.toISOString());
+
+  const promises: Array<Promise<unknown>> = [];
+
+  for (const reference of references) {
+    const tracePayloads = createTrace(currentDate, reference);
+    for (let i = randomInt(10); i > 0; i--) {
+      promises.push(
+        ...tracePayloads.map(body =>
+          fetch(otelEndpointUrl, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              Authorization: `Bearer ${HIVE_ORGANIZATION_ACCESS_TOKEN}`,
+              'X-Hive-Target-Ref': HIVE_TARGET_REF,
+            },
+            body: JSON.stringify(body),
+          }).then(res => {
+            if (!res.ok) {
+              throw new Error('Something went wrong');
+            }
+
+            return null;
+          }),
+        ),
+      );
+    }
+  }
+
+  await Promise.all(promises);
+
+  currentDate = date.addMinutes(currentDate, intervalMinutes);
+}
+
+function randomInt(until = 10) {
+  return Math.floor(Math.random() * (until + 1));
+}

From 985b57d3678690f4e73a8ddb51e3deebf59d9ce4 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 3 Jul 2025 14:55:57 +0200
Subject: [PATCH 035/123] typo

---
 scripts/seed-traces/README.md       | 2 +-
 scripts/seed-traces/seed-traces.mts | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/scripts/seed-traces/README.md b/scripts/seed-traces/README.md
index 7000b5ce40..fdf8f624bb 100644
--- a/scripts/seed-traces/README.md
+++ b/scripts/seed-traces/README.md
@@ -17,7 +17,7 @@ Then run the following script:
 ```
 HIVE_ORGANIZATION_ACCESS_TOKEN=hvo1/NWZmMGJjZmItODQxZS00ZmRiLWE4OTUtMzE3NDc2OWNhMGUwOjY2ZmM1NDI3ODRmYjFiMGYwODUyMWYwYmUyYjc1Yzk5NWM1ZTk0YWVlMzA4MTkxZGQ0NTFmZjcwNTRmM2IyMWY= \
 HIVE_TARGET_REF=the-guild/otel-demo/development \
-node --experimental-strip-types seed-traces-2.mts
+node --experimental-strip-types seed-traces.mts
 ```
 
 You can adjust the amount of days you want to seed by setting `USAGE_DAYS` (e.g. `USAGE_DAYS=5` will
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 0b48da91c0..4f6e1cc918 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -583,8 +583,10 @@ function mutate(currentTime: Date, reference: Reference) {
       const spanDuration = spanEndTime - spanStartTime;
       const spanOffset = spanStartTime - startTime;
       const newStartTime = currentTimeB + spanOffset;
-      span.startTimeUnixNano = newStartTime.toString();
+      span.startTimeUnixNano = newScreateTracetartTime.toString();
       span.endTimeUnixNano = (newStartTime + spanDuration).toString();
+
+      // TODO figure out a way to ranomly add errors
     }
   }
 }

From 57befdf54ee97022efb3004a71f6c59b5a71f585 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 4 Jul 2025 12:20:13 +0200
Subject: [PATCH 036/123] enable operation name and operation type filter

---
 packages/web/app/src/pages/target-traces.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 0a19fafb34..7b39819846 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1724,8 +1724,8 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         traceIds: props.filter['trace.id'],
         success: props.filter['graphql.status'].map(status => (status === 'ok' ? true : false)),
         errorCodes: props.filter['graphql.errorCode'],
-        // operationName: props.filter['graphql.operation'],
-        // operationType: props.filter['graphql.kind'] as any,
+        operationNames: props.filter['graphql.operation'],
+        operationTypes: props.filter['graphql.kind'] as any,
         subgraphNames: props.filter['graphql.subgraph'],
         httpStatusCodes: props.filter['http.status'],
         httpMethods: props.filter['http.method'],

From c99bd8ccf9d03caa82b19dfc871f2073021acf2c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 4 Jul 2025 12:30:49 +0200
Subject: [PATCH 037/123] how about we show the real operation

---
 packages/web/app/src/pages/target-trace.tsx | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index eb47edb007..9d8dd4800e 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -37,16 +37,6 @@ import { useWidthSync, WidthSyncProvider } from './traces/target-traces-width';
 
 const rootTraceColor = 'rgb(244, 183, 64)';
 
-const fetchProductsQueryString = `
-  query FetchProduct {
-    products {
-      id
-      name
-      price
-    }
-  }
-`;
-
 interface TraceAttribute {
   name: string;
   value: string;
@@ -887,7 +877,7 @@ function TraceSheet(props: TraceSheetProps) {
                           fontSize: 10,
                           minimap: { enabled: false },
                         }}
-                        code={fetchProductsQueryString}
+                        code={rootSpanUnmasked.spanAttributes['hive.graphql.operation.document']}
                       />
                     </div>
                   ) : null}

From df18979033ad679948cf9ed148b9e5d5f913bbcc Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 4 Jul 2025 13:04:12 +0200
Subject: [PATCH 038/123] reuse components

---
 packages/web/app/src/pages/target-trace.tsx  |    2 +-
 packages/web/app/src/pages/target-traces.tsx | 1015 ++----------------
 2 files changed, 118 insertions(+), 899 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 9d8dd4800e..f2cb5e5984 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -667,7 +667,7 @@ type TraceSheetProps = {
   targetSlug: string;
 };
 
-function TraceSheet(props: TraceSheetProps) {
+export function TraceSheet(props: TraceSheetProps) {
   const [activeView, setActiveView] = useState<
     'span-attributes' | 'resource-attributes' | 'events' | 'operation'
   >('span-attributes');
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 7b39819846..eb366f2e0d 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,19 +1,10 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import {
-  AlertTriangle,
-  ArrowUpDown,
-  Clock,
-  ExternalLinkIcon,
-  // FilterIcon,
-  // SearchIcon,
-  XIcon,
-} from 'lucide-react';
+import { ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
 import { useQuery } from 'urql';
 import { z } from 'zod';
-import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
 import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -23,11 +14,8 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
-// import { Input } from '@/components/ui/input';
 import { Meta } from '@/components/ui/meta';
 import { QueryError } from '@/components/ui/query-error';
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import {
   Sheet,
   SheetContent,
@@ -51,12 +39,11 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
-import { DocumentType, FragmentType, graphql, useFragment } from '@/gql';
+import { FragmentType, graphql, useFragment } from '@/gql';
 import { formatDuration } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
 import { Link, useRouter } from '@tanstack/react-router';
 import {
-  ColumnDef,
   flexRender,
   getCoreRowModel,
   getPaginationRowModel,
@@ -65,179 +52,13 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import * as dateMath from '../lib/date-math';
+import { TraceSheet as ImportedTraceSheet } from './target-trace';
 import {
   DurationFilter,
   MultiInputFilter,
   MultiSelectFilter,
   TimelineFilter,
 } from './traces/target-traces-filter';
-import { useWidthSync, WidthSyncProvider } from './traces/target-traces-width';
-
-const rootSpan: SpanProps = {
-  id: 'root',
-  title: 'FetchProducts',
-  serviceName: 'gateway',
-  duration: 8.12,
-  startedAt: 0,
-  children: [
-    {
-      id: '1ns581b',
-      title: 'plan',
-      serviceName: 'gateway',
-      duration: 2.3,
-      startedAt: 0.2,
-      children: [],
-    },
-    {
-      id: '213hbsdgs',
-      title: 'subgraph',
-      serviceName: 'products',
-      duration: 4.06,
-      startedAt: 2.3,
-      children: [
-        {
-          id: '138sndhs',
-          title: 'parse',
-          duration: 0.1,
-          startedAt: 2.4,
-          children: [],
-        },
-        {
-          id: '1n1bsxs1',
-          title: 'validate',
-          duration: 0.9,
-          startedAt: 2.5,
-          children: [],
-        },
-      ],
-    },
-    {
-      id: '1n23sxs1',
-      title: 'subgraph',
-      serviceName: 'prices',
-      duration: 2.03,
-      startedAt: 4.06,
-      children: [
-        {
-          id: '19nxb23b',
-          title: 'parse',
-          duration: 0.1,
-          startedAt: 4.1,
-          children: [],
-        },
-        {
-          id: '284bsdb1',
-          title: 'validate',
-          duration: 1.2,
-          startedAt: 4.2,
-          children: [
-            {
-              id: '284bsdb1',
-              title: 'async validation',
-              duration: 0.2,
-              startedAt: 5.4,
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-const chartData = [
-  { date: '2024-04-01', ok: 222, error: 15 },
-  { date: '2024-04-02', ok: 97, error: 18 },
-  { date: '2024-04-03', ok: 167, error: 12 },
-  { date: '2024-04-04', ok: 242, error: 26 },
-  { date: '2024-04-05', ok: 373, error: 29 },
-  { date: '2024-04-06', ok: 301, error: 34 },
-  { date: '2024-04-07', ok: 245, error: 18 },
-  { date: '2024-04-08', ok: 409, error: 32 },
-  { date: '2024-04-09', ok: 59, error: 11 },
-  { date: '2024-04-10', ok: 261, error: 19 },
-  { date: '2024-04-11', ok: 327, error: 35 },
-  { date: '2024-04-12', ok: 292, error: 21 },
-  { date: '2024-04-13', ok: 342, error: 38 },
-  { date: '2024-04-14', ok: 137, error: 22 },
-  { date: '2024-04-15', ok: 120, error: 17 },
-  { date: '2024-04-16', ok: 138, error: 19 },
-  { date: '2024-04-17', ok: 446, error: 36 },
-  { date: '2024-04-18', ok: 364, error: 41 },
-  { date: '2024-04-19', ok: 243, error: 18 },
-  { date: '2024-04-20', ok: 89, error: 15 },
-  { date: '2024-04-21', ok: 137, error: 20 },
-  { date: '2024-04-22', ok: 224, error: 17 },
-  { date: '2024-04-23', ok: 138, error: 23 },
-  { date: '2024-04-24', ok: 387, error: 29 },
-  { date: '2024-04-25', ok: 215, error: 25 },
-  { date: '2024-04-26', ok: 75, error: 13 },
-  { date: '2024-04-27', ok: 383, error: 42 },
-  { date: '2024-04-28', ok: 122, error: 18 },
-  { date: '2024-04-29', ok: 315, error: 24 },
-  { date: '2024-04-30', ok: 454, error: 38 },
-  { date: '2024-05-01', ok: 165, error: 22 },
-  { date: '2024-05-02', ok: 293, error: 31 },
-  { date: '2024-05-03', ok: 247, error: 19 },
-  { date: '2024-05-04', ok: 385, error: 42 },
-  { date: '2024-05-05', ok: 481, error: 39 },
-  { date: '2024-05-06', ok: 498, error: 52 },
-  { date: '2024-05-07', ok: 388, error: 30 },
-  { date: '2024-05-08', ok: 149, error: 21 },
-  { date: '2024-05-09', ok: 227, error: 18 },
-  { date: '2024-05-10', ok: 293, error: 33 },
-  { date: '2024-05-11', ok: 335, error: 27 },
-  { date: '2024-05-12', ok: 197, error: 24 },
-  { date: '2024-05-13', ok: 197, error: 16 },
-  { date: '2024-05-14', ok: 448, error: 49 },
-  { date: '2024-05-15', ok: 473, error: 38 },
-  { date: '2024-05-16', ok: 338, error: 40 },
-  { date: '2024-05-17', ok: 499, error: 42 },
-  { date: '2024-05-18', ok: 315, error: 35 },
-  { date: '2024-05-19', ok: 235, error: 18 },
-  { date: '2024-05-20', ok: 177, error: 23 },
-  { date: '2024-05-21', ok: 82, error: 14 },
-  { date: '2024-05-22', ok: 81, error: 12 },
-  { date: '2024-05-23', ok: 252, error: 29 },
-  { date: '2024-05-24', ok: 294, error: 22 },
-  { date: '2024-05-25', ok: 201, error: 25 },
-  { date: '2024-05-26', ok: 213, error: 17 },
-  { date: '2024-05-27', ok: 420, error: 46 },
-  { date: '2024-05-28', ok: 233, error: 19 },
-  { date: '2024-05-29', ok: 78, error: 13 },
-  { date: '2024-05-30', ok: 340, error: 28 },
-  { date: '2024-05-31', ok: 178, error: 23 },
-  { date: '2024-06-01', ok: 178, error: 20 },
-  { date: '2024-06-02', ok: 470, error: 41 },
-  { date: '2024-06-03', ok: 103, error: 16 },
-  { date: '2024-06-04', ok: 439, error: 38 },
-  { date: '2024-06-05', ok: 88, error: 14 },
-  { date: '2024-06-06', ok: 294, error: 25 },
-  { date: '2024-06-07', ok: 323, error: 37 },
-  { date: '2024-06-08', ok: 385, error: 32 },
-  { date: '2024-06-09', ok: 438, error: 48 },
-  { date: '2024-06-10', ok: 155, error: 20 },
-  { date: '2024-06-11', ok: 92, error: 15 },
-  { date: '2024-06-12', ok: 492, error: 42 },
-  { date: '2024-06-13', ok: 81, error: 13 },
-  { date: '2024-06-14', ok: 426, error: 38 },
-  { date: '2024-06-15', ok: 307, error: 35 },
-  { date: '2024-06-16', ok: 371, error: 31 },
-  { date: '2024-06-17', ok: 475, error: 52 },
-  { date: '2024-06-18', ok: 107, error: 17 },
-  { date: '2024-06-19', ok: 341, error: 29 },
-  { date: '2024-06-20', ok: 408, error: 45 },
-  { date: '2024-06-21', ok: 169, error: 21 },
-  { date: '2024-06-22', ok: 317, error: 27 },
-  { date: '2024-06-23', ok: 480, error: 53 },
-  { date: '2024-06-24', ok: 132, error: 18 },
-  { date: '2024-06-25', ok: 141, error: 19 },
-  { date: '2024-06-26', ok: 434, error: 38 },
-  { date: '2024-06-27', ok: 448, error: 49 },
-  { date: '2024-06-28', ok: 149, error: 20 },
-  { date: '2024-06-29', ok: 103, error: 16 },
-  { date: '2024-06-30', ok: 446, error: 40 },
-];
 
 const chartConfig = {
   ok: {
@@ -446,9 +267,10 @@ const TracesList = memo(function TracesList(
   props: SortProps &
     PaginationProps & {
       traces: FragmentType<typeof TracesList_Trace>[];
+      onSelectTraceId: (traceId: string) => void;
+      selectedTraceId: string | null;
     },
 ) {
-  const [traceInSheet, setTraceInSheet] = useState<Trace | null>(null);
   const router = useRouter();
   const data = useFragment(TracesList_Trace, props.traces);
 
@@ -664,7 +486,7 @@ const TracesList = memo(function TracesList(
           );
         },
         cell: ({ row }) => {
-          const duration = formatDuration(row.getValue('duration') / 1000000, true);
+          const duration = formatDuration((row.getValue('duration') as number) / 1000000, true);
           return <div className="px-4 font-mono text-xs font-medium">{duration}</div>;
         },
       },
@@ -716,7 +538,7 @@ const TracesList = memo(function TracesList(
         cell: ({ row }) => {
           return (
             <div className="text-center font-mono text-xs font-medium">
-              {row.getValue('subgraphs').length}
+              {(row.getValue('subgraphs') as Array<string>).length}
             </div>
           );
         },
@@ -756,15 +578,7 @@ const TracesList = memo(function TracesList(
   });
 
   return (
-    <Sheet
-      defaultOpen={false}
-      open={traceInSheet !== null}
-      onOpenChange={isOpen => {
-        if (!isOpen) {
-          setTraceInSheet(null);
-        }
-      }}
-    >
+    <>
       <div className="rounded-lg border bg-gray-900/50 shadow-sm">
         <Table>
           <TableHeader>
@@ -790,11 +604,11 @@ const TracesList = memo(function TracesList(
                   data-state={row.getIsSelected() && 'selected'}
                   className={cn(
                     'cursor-pointer',
-                    traceInSheet?.id === row.original.id ? 'bg-white/10' : '',
+                    props.selectedTraceId === row.original.id ? 'bg-white/10' : '',
                   )}
                   onClick={ev => {
                     ev.preventDefault();
-                    setTraceInSheet(row.original);
+                    props.onSelectTraceId(row.original.id);
                   }}
                 >
                   {row.getVisibleCells().map(cell => (
@@ -834,8 +648,7 @@ const TracesList = memo(function TracesList(
           </Button>
         </div>
       </div>
-      <TraceSheet trace={traceInSheet} />
-    </Sheet>
+    </>
   );
 });
 
@@ -1280,328 +1093,103 @@ function Filters(
   );
 }
 
-const fetchProductsQueryString = `
-  query FetchProduct {
-    products {
+type SelectedTraceSheetProps = {
+  organizationSlug: string;
+  projectSlug: string;
+  targetSlug: string;
+  traceId: string;
+};
+
+const SelectedTraceSheetQuery = graphql(`
+  query SelectedTraceSheetQuery($targetSelector: TargetSelectorInput!, $traceId: ID!) {
+    target(reference: { bySelector: $targetSelector }) {
       id
-      name
-      price
+      trace(traceId: $traceId) {
+        ...TraceSheet_TraceFragment
+        id
+        operationName
+        duration
+        success
+        timestamp
+      }
     }
   }
-`;
+`);
 
-interface TraceAttribute {
-  name: string;
-  value: string | number | ReactNode;
-  category?: string;
-}
+function SelectedTraceSheet(props: SelectedTraceSheetProps) {
+  const [queryResult] = useQuery({
+    query: SelectedTraceSheetQuery,
+    variables: {
+      targetSelector: {
+        organizationSlug: props.organizationSlug,
+        projectSlug: props.projectSlug,
+        targetSlug: props.targetSlug,
+      },
+      traceId: props.traceId,
+    },
+  });
 
-function TraceView(props: { rootSpan: SpanProps; serviceNames: string[] }) {
-  const [width] = useWidthSync();
-  const [highlightedServiceName, setHighlightedServiceName] = useState<string | null>(null);
-  const rootSpan = props.rootSpan;
-  const serviceNames = props.serviceNames;
+  const trace = queryResult.data?.target?.trace;
 
   return (
-    <div className="flex h-full flex-col">
-      <div className="sticky top-0 z-10 border-b border-gray-800">
-        <div className="flex w-full items-center text-xs text-white">
-          <div className="h-12 shrink-0 py-2" style={{ width }}>
-            <div className="pl-4">
-              <div className="font-medium">Timeline</div>
-              <div className="text-xs text-gray-500">Spans and details</div>
-            </div>
+    <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
+      {trace && (
+        <SheetHeader className="relative border-b border-gray-800 p-4">
+          <div className="flex items-center justify-between">
+            <SheetTitle className="text-lg font-medium text-white">
+              {trace?.operationName}
+              <span className="text-muted-foreground ml-2 font-mono font-normal">
+                {trace.id.substring(0, 4)}
+              </span>
+            </SheetTitle>
           </div>
-          <div className="h-12 grow pr-8">
-            <div className="relative h-full w-full">
-              <div className="absolute left-0 top-6 -translate-x-1/2 text-center">0ms</div>
-              <div className="absolute bottom-0 left-0 h-2 w-px bg-[#27272a]" />
-              <div className="absolute left-[25%] top-6 -translate-x-1/2 text-center">2.03ms</div>
-              <div className="absolute bottom-0 left-[25%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute left-[50%] top-6 -translate-x-1/2 text-center">4.06ms</div>
-              <div className="absolute bottom-0 left-[50%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute left-[75%] top-6 -translate-x-1/2 text-center">6.09ms</div>
-              <div className="absolute bottom-0 left-[75%] h-2 w-px -translate-x-1/2 bg-[#27272a]" />
-              <div className="absolute right-0 top-6 translate-x-1/2 text-center">8.12ms</div>
-              <div className="absolute bottom-0 right-0 h-2 w-px -translate-x-1/2 bg-[#27272a]" />
+          <SheetDescription className="mt-1 text-xs text-gray-400">
+            Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
+          </SheetDescription>
+          <div className="mt-2 flex items-center gap-3 text-xs">
+            <div className="flex items-center gap-1">
+              <Clock className="h-3 w-3 text-gray-400" />
+              <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
             </div>
-          </div>
-        </div>
-      </div>
-      <ScrollArea className="flex-grow">
-        <div>
-          <TraceTree
-            leftPanelWidth={width}
-            rootSpan={rootSpan}
-            highlightedServiceName={highlightedServiceName}
-          />
-        </div>
-      </ScrollArea>
-      <div className="sticky bottom-0 z-10 px-2 py-4">
-        <div className="flex flex-wrap items-center justify-center gap-6 text-xs text-gray-500">
-          {serviceNames.map((serviceName, index) => (
-            <div
-              key={serviceName}
-              className="flex cursor-pointer items-center gap-2 hover:text-white"
-              onMouseEnter={() => setHighlightedServiceName(serviceName)}
-              onMouseLeave={() => setHighlightedServiceName(null)}
+            <Badge
+              variant="outline"
+              className={cn(
+                'rounded-sm border-0 px-1 font-medium uppercase',
+                trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+              )}
             >
-              <div
-                className="size-2"
-                style={{
-                  backgroundColor: colors[index % colors.length],
-                }}
-              />
-              <div>{serviceName}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function TraceSheet(props: { trace: DocumentType<typeof TracesList_Trace> | null }) {
-  const targetRef = useTargetReference();
-  const [activeView, setActiveView] = useState<'attributes' | 'events' | 'operation'>('attributes');
-  const trace = props.trace;
-
-  if (!trace) {
-    return null;
-  }
-
-  const attributes: Array<TraceAttribute> = [
-    {
-      name: 'graphql.operationKind',
-      value: trace.operationType,
-      category: 'GraphQL',
-    },
-    {
-      name: 'graphql.subgraphs',
-      value: trace.subgraphs.join(', '),
-      category: 'GraphQL',
-    },
-    {
-      name: 'http.method',
-      value: trace.httpMethod,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.host',
-      value: trace.httpHost,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.route',
-      value: trace.httpRoute,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.url',
-      value: trace.httpUrl,
-      category: 'HTTP',
-    },
-    {
-      name: 'http.status',
-      value: trace.httpStatusCode,
-      category: 'HTTP',
-    },
-  ];
-
-  const serviceNames = listServiceNames(rootSpan);
-
-  return (
-    <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
-      <SheetHeader className="relative border-b border-gray-800 p-4">
-        <div className="flex items-center justify-between">
-          <SheetTitle className="text-lg font-medium text-white">
-            {trace.operationName}
-            <span className="text-muted-foreground ml-2 font-mono font-normal">
-              {trace.id.substring(0, 4)}
+              {trace.success ? 'Ok' : 'Error'}
+            </Badge>
+            <span className="font-mono uppercase text-gray-300">
+              {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
             </span>
-          </SheetTitle>
-        </div>
-        <SheetDescription className="mt-1 text-xs text-gray-400">
-          Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
-        </SheetDescription>
-        <div className="mt-2 flex items-center gap-3 text-xs">
-          <div className="flex items-center gap-1">
-            <Clock className="h-3 w-3 text-gray-400" />
-            <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
           </div>
-          <Badge
-            variant="outline"
-            className={cn(
-              'rounded-sm border-0 px-1 font-medium uppercase',
-              trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
-            )}
-          >
-            {trace.success ? 'Ok' : 'Error'}
-          </Badge>
-          <span className="font-mono uppercase text-gray-300">
-            {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
-          </span>
-        </div>
-        <Button asChild variant="outline" size="sm">
-          <Link
-            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
-            params={{
-              organizationSlug: targetRef.organizationSlug,
-              projectSlug: targetRef.projectSlug,
-              targetSlug: targetRef.targetSlug,
-              traceId: trace.id,
-            }}
-            className="absolute bottom-4 right-4"
-          >
-            <ExternalLinkIcon className="mr-1 h-3 w-3" />
-            Full Trace
-          </Link>
-        </Button>
-      </SheetHeader>
-      <div className="h-[calc(100vh-113px)]">
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
-            <WidthSyncProvider defaultWidth={251}>
-              <TraceView rootSpan={rootSpan} serviceNames={serviceNames} />
-            </WidthSyncProvider>
-          </ResizablePanel>
-          <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
-            <div className="flex h-full flex-col">
-              <div className="sticky top-0 z-10 border-b border-gray-800">
-                <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
-                  <TabButton
-                    isActive={activeView === 'attributes'}
-                    onClick={() => setActiveView('attributes')}
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <div>Attributes</div>
-                      <div>
-                        <Badge
-                          variant="secondary"
-                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
-                        >
-                          7
-                        </Badge>
-                      </div>
-                    </div>
-                  </TabButton>
-                  <TabButton
-                    isActive={activeView === 'events'}
-                    onClick={() => setActiveView('events')}
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <div>Events</div>
-                      <div>
-                        <Badge
-                          variant="secondary"
-                          className="rounded-md px-2 py-0.5 text-[10px] font-thin"
-                        >
-                          3
-                        </Badge>
-                      </div>
-                    </div>
-                  </TabButton>
-                  <TabButton
-                    isActive={activeView === 'operation'}
-                    onClick={() => setActiveView('operation')}
-                  >
-                    <div className="flex items-center gap-x-2">
-                      <div>Operation</div>
-                    </div>
-                  </TabButton>
-                </div>
-              </div>
-              <ScrollArea className="relative grow">
-                <div className="h-full">
-                  {activeView === 'attributes' ? (
-                    <div>
-                      {attributes.length > 0 ? (
-                        <div>
-                          {attributes.map((attr, index) => (
-                            <div
-                              key={index}
-                              className="border-border flex items-center justify-between border-b px-3 py-3 text-xs"
-                            >
-                              <div className="text-gray-400">{attr.name}</div>
-                              <div className="font-mono text-white">{attr.value}</div>
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <div className="py-4 text-center">
-                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
-                          <p className="text-xs text-gray-500">
-                            No attributes found for this trace
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  ) : null}
-                  {activeView === 'events' ? (
-                    <div className="p-4">
-                      <div className="space-y-2">
-                        {[
-                          {
-                            code: 'DB_CONNECTION_ERROR',
-                            message: 'Connection to database timed out after 5 seconds',
-                            stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
-                          },
-                          {
-                            code: 'GRAPHQL_PARSE_FAILED',
-                            message: 'Sent GraphQL Operation cannot be parsed',
-                          },
-                          {
-                            code: 'TIMEOUT_ERROR',
-                            message: 'Operation timed out after 10 seconds',
-                          },
-                        ].map((exception, index) => (
-                          <div
-                            key={index}
-                            className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
-                          >
-                            <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
-                              <span className="font-mono text-xs font-medium text-red-300">
-                                {exception.code}
-                              </span>
-                              <Badge
-                                variant="outline"
-                                className="border-red-700 bg-red-950 text-[10px] text-red-300"
-                              >
-                                Exception
-                              </Badge>
-                            </div>
-                            <div className="p-3 text-xs">
-                              <p className="text-gray-300">{exception.message}</p>
-                              {exception.stacktrace && (
-                                <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
-                                  {exception.stacktrace}
-                                </pre>
-                              )}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ) : null}
-                  {activeView === 'operation' ? (
-                    <div className="absolute bottom-0 top-0 w-full">
-                      <GraphQLHighlight
-                        height={'100%'}
-                        options={{
-                          fontSize: 10,
-                          minimap: { enabled: false },
-                        }}
-                        code={fetchProductsQueryString}
-                      />
-                    </div>
-                  ) : null}
-                </div>
-              </ScrollArea>
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </div>
+          <Button asChild variant="outline" size="sm">
+            <Link
+              to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+              params={{
+                organizationSlug: props.organizationSlug,
+                projectSlug: props.projectSlug,
+                targetSlug: props.targetSlug,
+                traceId: props.traceId,
+              }}
+              className="absolute bottom-4 right-4"
+            >
+              <ExternalLinkIcon className="mr-1 h-3 w-3" />
+              Full Trace
+            </Link>
+          </Button>
+        </SheetHeader>
+      )}
+      {trace && (
+        <ImportedTraceSheet
+          activeSpanId={null}
+          organizationSlug={props.organizationSlug}
+          projectSlug={props.projectSlug}
+          targetSlug={props.targetSlug}
+          trace={trace}
+        />
+      )}
     </SheetContent>
   );
 }
@@ -1742,6 +1330,8 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     [query.data?.target?.traces.edges],
   );
 
+  const [selectedTraceId, setSelectedTraceId] = useState<string | null>(null);
+
   const filterOptions = useMemo(() => {
     const options = query.data?.target?.tracesFilterOptions;
 
@@ -1850,10 +1440,29 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
               sorting={props.sorting}
               pagination={props.pagination}
               traces={traces ?? []}
+              onSelectTraceId={setSelectedTraceId}
+              selectedTraceId={selectedTraceId}
             />
           </div>
         </SidebarInset>
       </SidebarProvider>
+      <Sheet
+        open={selectedTraceId !== null}
+        onOpenChange={isOpen => {
+          if (!isOpen) {
+            setSelectedTraceId(null);
+          }
+        }}
+      >
+        {selectedTraceId && (
+          <SelectedTraceSheet
+            organizationSlug={targetRef.organizationSlug}
+            projectSlug={targetRef.projectSlug}
+            targetSlug={targetRef.targetSlug}
+            traceId={selectedTraceId}
+          />
+        )}
+      </Sheet>
     </div>
   );
 }
@@ -1977,392 +1586,6 @@ function TreeIcon(props: {
   );
 }
 
-function TabButton(props: { isActive: boolean; onClick(): void; children: ReactNode }) {
-  return (
-    <button
-      className={cn(
-        'border-b-2 px-2 py-2',
-        props.isActive ? 'border-[#2662d8]' : 'hover:border-border border-transparent',
-      )}
-      onClick={props.onClick}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-function TraceResize(props: { minWidth: number; maxWidth: number }) {
-  const [width, setWidth] = useWidthSync();
-  const [isDragging, setIsDragging] = useState(false);
-  const handleRef = useRef<HTMLDivElement>(null);
-  const startPosRef = useRef(0);
-  const startWidthRef = useRef(0);
-  const { minWidth, maxWidth } = props;
-
-  // Handle the start of dragging
-  const handleDragStart = useCallback(
-    (clientX: number) => {
-      setIsDragging(true);
-      startPosRef.current = clientX;
-      startWidthRef.current = width;
-
-      // Prevent text selection during drag
-      document.body.style.userSelect = 'none';
-    },
-    [width],
-  );
-
-  // Handle dragging
-  const handleDrag = useCallback(
-    (clientX: number) => {
-      if (!isDragging) return;
-      const delta = clientX - startPosRef.current;
-      let newWidth = startWidthRef.current + delta;
-      // Constrain to min/max
-      newWidth = Math.min(Math.max(newWidth, minWidth), maxWidth);
-      setWidth(newWidth);
-    },
-    [isDragging, minWidth, maxWidth, setWidth],
-  );
-
-  // Handle the end of dragging
-  const handleDragEnd = useCallback(() => {
-    setIsDragging(false);
-    document.body.style.userSelect = '';
-  }, []);
-
-  // Pointer event handlers
-  const handlePointerDown = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      // Set pointer capture on the drag handle element
-      if (handleRef.current) {
-        handleRef.current.setPointerCapture(e.pointerId);
-      }
-      handleDragStart(e.clientX);
-    },
-    [handleDragStart],
-  );
-
-  const handlePointerMove = useCallback(
-    (e: React.PointerEvent) => {
-      if (!isDragging) return;
-      e.preventDefault();
-      handleDrag(e.clientX);
-    },
-    [isDragging, handleDrag],
-  );
-
-  const handlePointerUp = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      // Release pointer capture
-      if (handleRef.current) {
-        handleRef.current.releasePointerCapture(e.pointerId);
-      }
-      handleDragEnd();
-    },
-    [handleDragEnd],
-  );
-
-  return (
-    <div
-      className="absolute bottom-0 top-0 z-20 w-[5px] cursor-ew-resize"
-      style={{ left: width - 2 }} // Position 2px to the left of the center
-      ref={handleRef}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
-      {/* Invisible wider hit area */}
-      <div
-        className={cn(
-          'absolute inset-y-0 left-[2px] w-px bg-gray-800',
-          isDragging ? 'bg-gray-600' : 'hover:bg-gray-700',
-        )}
-      />
-    </div>
-  );
-}
-
-function TraceTree(props: {
-  highlightedServiceName: string | null;
-  rootSpan: SpanProps;
-  leftPanelWidth: number;
-}) {
-  const [width] = useWidthSync();
-  const minWidth = 175;
-  const maxWidth = 450;
-  const serviceNames = listServiceNames(props.rootSpan);
-  const serviceNameToColorMap = Object.fromEntries(
-    serviceNames.map((name, index) => [name, colors[index % colors.length]]),
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div className="relative" ref={containerRef}>
-      <TraceResize minWidth={minWidth} maxWidth={maxWidth} />
-      <Node
-        key={props.rootSpan.id}
-        level={0}
-        highlightedServiceName={props.highlightedServiceName}
-        totalDuration={rootSpan.duration}
-        leftPanelWidth={width}
-        span={props.rootSpan}
-        parentSpan={null}
-        groupLines={[]}
-        parentColor={null}
-        color={colors[0]}
-        serviceNameToColorMap={serviceNameToColorMap}
-      />
-    </div>
-  );
-}
-
-type SpanProps = {
-  id: string;
-  title: string;
-  serviceName?: string;
-  duration: number;
-  startedAt: number;
-  children: SpanProps[];
-};
-
-type NodeProps = {
-  highlightedServiceName: string | null;
-  level: number;
-  totalDuration: number;
-  leftPanelWidth: number;
-  span: SpanProps;
-  parentSpan: SpanProps | null;
-  groupLines: boolean[];
-  color: string;
-  parentColor: string | null;
-  serviceNameToColorMap: Record<string, string>;
-};
-
-function countChildren(spans: SpanProps[]): number {
-  return spans.reduce((acc, span) => acc + countChildren(span.children), spans.length);
-}
-
-function _listServiceNames(span: SpanProps, serviceNames: string[]) {
-  if (span.serviceName && !serviceNames.includes(span.serviceName)) {
-    serviceNames.push(span.serviceName);
-  }
-
-  for (const child of span.children) {
-    _listServiceNames(child, serviceNames);
-  }
-}
-
-function listServiceNames(span: SpanProps): string[] {
-  const serviceNames: string[] = [];
-  _listServiceNames(span, serviceNames);
-  return serviceNames;
-}
-
-const colors = [
-  '#2662d8',
-  '#2eb88a',
-  '#e88d30',
-  '#af56db',
-  '#7BA4F9',
-  '#D8B5FF',
-  '#64748B',
-  '#6C5CE7',
-  '#F27059',
-  '#2D9D78',
-];
-function Node(props: NodeProps) {
-  const [collapsed, setCollapsed] = useState(false);
-  const leftPositionPercentage = roundFloatToTwoDecimals(
-    (props.span.startedAt / props.totalDuration) * 100,
-  );
-  const widthPercentage = roundFloatToTwoDecimals(
-    (props.span.duration / props.totalDuration) * 100,
-  );
-
-  const isNearRightEdge = leftPositionPercentage + widthPercentage > 85;
-  const isDimmed =
-    typeof props.highlightedServiceName === 'string' &&
-    props.highlightedServiceName !== props.span.serviceName;
-
-  const isLastChild =
-    props.parentSpan?.children[props.parentSpan.children.length - 1].id === props.span.id;
-
-  const childrenCount = collapsed
-    ? countChildren(props.span.children) + 1
-    : props.span.children.length;
-  const canBeCollapsed = props.span.children.length > 0;
-
-  const color = props.color;
-  const parentColor = props.parentColor ?? color;
-
-  const percentageOfTotal = ((props.span.duration / props.totalDuration) * 100).toFixed(2);
-  const percentageOfParent = props.parentSpan
-    ? ((props.span.duration / props.parentSpan.duration) * 100).toFixed(2)
-    : null;
-
-  return (
-    <>
-      <div className="cursor-pointer pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
-        <div className="relative flex h-8 w-full items-center overflow-hidden">
-          <div
-            className="relative flex h-8 shrink-0 items-center gap-x-2 overflow-hidden pl-1"
-            style={{ width: `${props.leftPanelWidth}px` }}
-          >
-            <div className="flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500">
-              <TreeIcon
-                key={`tree-icon-${props.span.id}`}
-                isLeaf={props.span.children.length === 0}
-                isLastChild={isLastChild}
-                childrenCount={childrenCount}
-                hasParent={!!props.parentSpan}
-                level={props.level}
-                lines={props.groupLines}
-                isCollapsed={collapsed}
-                onClick={canBeCollapsed ? () => setCollapsed(collapsed => !collapsed) : undefined}
-              />
-            </div>
-            <div
-              className={cn('whitespace-nowrap text-xs', isDimmed ? 'text-gray-500' : 'text-white')}
-            >
-              {props.span.title}
-            </div>
-            {props.span.serviceName ? (
-              <div
-                className={cn(
-                  'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs',
-                  isDimmed ? 'text-gray-600' : 'text-gray-500',
-                )}
-              >
-                {props.span.serviceName}
-              </div>
-            ) : null}
-          </div>
-          <div
-            className={cn(
-              'relative flex h-full grow items-center overflow-hidden',
-              isDimmed ? 'opacity-25' : '',
-            )}
-          >
-            <TooltipProvider>
-              <Tooltip disableHoverableContent delayDuration={100}>
-                <TooltipTrigger asChild>
-                  <div
-                    className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
-                    style={{
-                      left: `min(${leftPositionPercentage}%, 100% - 1px)`,
-                      width: `${widthPercentage}%`,
-                      backgroundColor: color,
-                    }}
-                  >
-                    <div
-                      className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
-                      style={{
-                        fontSize: '11px',
-                        ...(isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
-                      }}
-                    >
-                      {props.span.duration}ms
-                    </div>
-                  </div>
-                </TooltipTrigger>
-                <TooltipContent
-                  side="bottom"
-                  className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
-                >
-                  {/* Content */}
-                  <div className="space-y-3">
-                    <div className="grid grid-cols-2 gap-y-2">
-                      <div className="text-gray-400">Duration</div>
-                      <div className="text-right font-mono">
-                        <span>{props.span.duration}ms</span>
-                      </div>
-
-                      <div className="text-gray-400">Started At</div>
-                      <div className="text-right font-mono">{props.span.startedAt}ms</div>
-
-                      <div className="text-gray-400">% of Total</div>
-                      <div className="text-right font-mono">{percentageOfTotal}%</div>
-
-                      <div className="col-span-2">
-                        {/* Timeline visualization */}
-                        <div>
-                          <div className="h-[2px] w-full overflow-hidden bg-gray-800">
-                            <div
-                              className="h-full"
-                              style={{ width: `${percentageOfTotal}%`, backgroundColor: colors[0] }}
-                            />
-                          </div>
-                        </div>
-                      </div>
-
-                      {percentageOfParent === null ? null : (
-                        <>
-                          <div className="text-gray-400">% of Parent</div>
-                          <div className="text-right font-mono">{percentageOfParent}%</div>
-
-                          <div className="col-span-2">
-                            {/* Timeline visualization */}
-                            <div>
-                              <div className="h-[2px] w-full overflow-hidden bg-gray-800">
-                                <div
-                                  className="h-full"
-                                  style={{
-                                    width: `${percentageOfParent}%`,
-                                    backgroundColor: parentColor,
-                                  }}
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        </div>
-      </div>
-      {collapsed
-        ? null
-        : props.span.children.length
-          ? props.span.children.map(childSpan => {
-              const span = {
-                ...childSpan,
-                // if the child span doesn't have a serviceName, use the parent's serviceName
-                serviceName: childSpan.serviceName ?? props.span.serviceName,
-              };
-
-              return (
-                <Node
-                  key={span.id}
-                  highlightedServiceName={props.highlightedServiceName}
-                  leftPanelWidth={props.leftPanelWidth}
-                  totalDuration={props.totalDuration}
-                  span={span}
-                  level={props.level + 1}
-                  parentSpan={props.span}
-                  groupLines={
-                    isLastChild
-                      ? // remove the last line if it's the last span from the group
-                        props.groupLines.slice(0, -1).concat(false, true)
-                      : props.groupLines.concat(true)
-                  }
-                  parentColor={color}
-                  color={span.serviceName ? props.serviceNameToColorMap[span.serviceName] : color}
-                  serviceNameToColorMap={props.serviceNameToColorMap}
-                />
-              );
-            })
-          : null}
-    </>
-  );
-}
-
 function GridTable(props: {
   rows: Array<{
     key: string;
@@ -2380,7 +1603,3 @@ function GridTable(props: {
     </div>
   );
 }
-
-function roundFloatToTwoDecimals(num: number) {
-  return Math.round(num * 100) / 100;
-}

From a111352e12c1940df1a5296892a852bd308ce8a0 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 4 Jul 2025 14:14:31 +0200
Subject: [PATCH 039/123] ???

---
 scripts/seed-traces/seed-traces.mts | 34 ++++++++++++++++-------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 4f6e1cc918..2aab743fbb 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -571,22 +571,26 @@ function mutate(currentTime: Date, reference: Reference) {
   const currentTimeB = toTimeUnixNano(currentTime);
 
   for (const payload of reference) {
-    for (const span of payload.resourceSpans[0].scopeSpans[0].spans) {
-      if (span.parentSpanId) {
-        span.parentSpanId = getNewSpanId(span.parentSpanId);
+    for (const resourceSpans of payload.resourceSpans) {
+      for (const scopeSpan of resourceSpans.scopeSpans) {
+        for (const span of scopeSpan.spans) {
+          if (span.parentSpanId) {
+            span.parentSpanId = getNewSpanId(span.parentSpanId);
+          }
+          span.spanId = getNewSpanId(span.spanId);
+          span.traceId = newTraceId;
+
+          const spanStartTime = BigInt(span.startTimeUnixNano);
+          const spanEndTime = BigInt(span.endTimeUnixNano);
+          const spanDuration = spanEndTime - spanStartTime;
+          const spanOffset = spanStartTime - startTime;
+          const newStartTime = currentTimeB + spanOffset;
+          span.startTimeUnixNano = newStartTime.toString();
+          span.endTimeUnixNano = (newStartTime + spanDuration).toString();
+
+          // TODO figure out a way to ranomly add errors
+        }
       }
-      span.spanId = getNewSpanId(span.spanId);
-      span.traceId = newTraceId;
-
-      const spanStartTime = BigInt(span.startTimeUnixNano);
-      const spanEndTime = BigInt(span.endTimeUnixNano);
-      const spanDuration = spanEndTime - spanStartTime;
-      const spanOffset = spanStartTime - startTime;
-      const newStartTime = currentTimeB + spanOffset;
-      span.startTimeUnixNano = newScreateTracetartTime.toString();
-      span.endTimeUnixNano = (newStartTime + spanDuration).toString();
-
-      // TODO figure out a way to ranomly add errors
     }
   }
 }

From f60066781f58287a6b51ce06d9aad4b31579ca14 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 12:50:58 +0200
Subject: [PATCH 040/123] store hash

---
 packages/migrations/src/clickhouse-actions/015-otel-trace.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 890bc6d6b1..53bb7b02ff 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -103,6 +103,7 @@ export const action: Action = async exec => {
       , "graphql_operation_name" String CODEC(ZSTD(1))
       , "graphql_operation_type" LowCardinality(String) CODEC(ZSTD(1))
       , "graphql_operation_document" String CODEC(ZSTD(1))
+      , "graphql_operation_hash" String CODEC(ZSTD(1))
       , "graphql_error_count" UInt32 CODEC(T64, ZSTD(1))
       , "graphql_error_codes" Array(LowCardinality(String)) CODEC(ZSTD(1))
       , "subgraph_names" Array(LowCardinality(String)) CODEC(ZSTD(1))
@@ -145,6 +146,7 @@ export const action: Action = async exec => {
       , "graphql_operation_name" String
       , "graphql_operation_type" LowCardinality(String)
       , "graphql_operation_document" String
+      , "graphql_operation_hash" String
       , "graphql_error_count" UInt32
       , "graphql_error_codes" Array(LowCardinality(String))
       , "subgraph_names" Array(String)
@@ -166,6 +168,7 @@ export const action: Action = async exec => {
         , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
         , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
         , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['hive.graphql.operation.hash'] AS "graphql_operation_hash"
         , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
         , if(
             "SpanAttributes"['hive.graphql.error.codes'] = '',

From 6e0e9d3d4a82211f86914ad1b6b61c48bacf0a97 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 13:18:18 +0200
Subject: [PATCH 041/123] client and hash

---
 .../src/modules/operations/module.graphql.ts  | 22 +++++++
 .../modules/operations/providers/traces.ts    | 63 ++++++++++---------
 .../src/modules/operations/resolvers/Trace.ts | 11 ++--
 3 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index b9ab406ded..0bf6f25317 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -274,10 +274,32 @@ export default gql`
     timestamp: DateTime!
     operationName: String
     operationType: GraphQLOperationType!
+    """
+    The Hash of the GraphQL operation.
+    """
+    operationHash: ID
+    """
+    Total duration of the trace.
+    """
     duration: Int!
+    """
+    The subgraphs called within the trace.
+    """
     subgraphs: [String!]!
+    """
+    Wether the trace is successful.
+    A trace is a success if no GraphQL errors occured and the HTTP status code is in the 2XX to 3XX range.
+    """
     success: Boolean!
+    """
+    The client name.
+    Usually this is the 'x-graphql-client-name' header sent to the gateway.
+    """
     clientName: String
+    """
+    The client version.
+    Usually this is the 'x-graphql-client-version' header sent to the gateway.
+    """
     clientVersion: String
     httpStatusCode: String
     httpMethod: String
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 8847397ba9..82c0673ee2 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -229,11 +229,46 @@ const traceFields = sql`
   , "http_url" AS "httpUrl"
   , "duration"
   , "graphql_operation_name" AS "graphqlOperationName"
+  , "graphql_operation_document" AS "graphqlOperationDocument"
+  , "graphql_operation_hash" AS "graphqlOperationHash"
+  , "client_name" AS "clientName"
+  , "client_version" AS "clientVersion"
   , upper("graphql_operation_type") AS "graphqlOperationType"
   , "graphql_error_codes" AS "graphqlErrorCodes"
   , "subgraph_names" AS "subgraphNames"
 `;
 
+const TraceModel = z.object({
+  traceId: z.string(),
+  targetId: z.string().uuid(),
+  spanId: z.string(),
+  timestamp: z.string(),
+  httpStatusCode: z.string(),
+  httpMethod: z.string(),
+  httpHost: z.string(),
+  httpRoute: z.string(),
+  httpUrl: z.string(),
+  duration: z.string().transform(value => parseFloat(value)),
+  graphqlOperationName: z
+    .string()
+    .nullable()
+    .transform(value => value || null),
+  graphqlOperationType: z.union([
+    z.literal('QUERY'),
+    z.literal('MUTATION'),
+    z.literal('SUBSCRIPTION'),
+  ]),
+  graphqlOperationHash: z.string().nullable(),
+  clientName: z.string().nullable(),
+  clientVersion: z.string().nullable(),
+  graphqlErrorCodes: z.array(z.string()).nullable(),
+  subgraphNames: z.array(z.string()).transform(s => (s.length === 1 && s.at(0) === '' ? [] : s)),
+});
+
+export type Trace = z.TypeOf<typeof TraceModel>;
+
+const TraceListModel = z.array(TraceModel);
+
 type TraceFilter = {
   period: null | GraphQLSchema.DateRangeInput;
   duration: {
@@ -333,34 +368,6 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false)
   return ANDs;
 }
 
-const TraceModel = z.object({
-  traceId: z.string(),
-  targetId: z.string().uuid(),
-  spanId: z.string(),
-  timestamp: z.string(),
-  httpStatusCode: z.string(),
-  httpMethod: z.string(),
-  httpHost: z.string(),
-  httpRoute: z.string(),
-  httpUrl: z.string(),
-  duration: z.string().transform(value => parseFloat(value)),
-  graphqlOperationName: z
-    .string()
-    .nullable()
-    .transform(value => value || null),
-  graphqlOperationType: z.union([
-    z.literal('QUERY'),
-    z.literal('MUTATION'),
-    z.literal('SUBSCRIPTION'),
-  ]),
-  graphqlErrorCodes: z.array(z.string()).nullable(),
-  subgraphNames: z.array(z.string()).transform(s => (s.length === 1 && s.at(0) === '' ? [] : s)),
-});
-
-export type Trace = z.TypeOf<typeof TraceModel>;
-
-const TraceListModel = z.array(TraceModel);
-
 const IntFromString = z.string().transform(value => parseInt(value, 10));
 
 const TraceStatusBreakdownBucket = z.object({
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
index 5617a000f2..01e7f1f443 100644
--- a/packages/services/api/src/modules/operations/resolvers/Trace.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -12,11 +12,11 @@ import type { TraceResolvers } from './../../../__generated__/types';
  */
 export const Trace: TraceResolvers = {
   /* Implement Trace resolver logic here */
-  clientName(_trace) {
-    return 'noop';
+  clientName(trace) {
+    return trace.clientName;
   },
-  clientVersion(_trace) {
-    return 'noop';
+  clientVersion(trace) {
+    return trace.clientVersion;
   },
   httpStatusCode(trace) {
     return trace.httpStatusCode;
@@ -42,4 +42,7 @@ export const Trace: TraceResolvers = {
       (trace.httpStatusCode.startsWith('2') || trace.httpStatusCode.startsWith('3'))
     );
   },
+  operationHash: async trace => {
+    return trace.graphqlOperationHash;
+  },
 };

From 280dc7a782a7a64ec0f577290392e2fa4dca117e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 13:35:32 +0200
Subject: [PATCH 042/123] improve seed

---
 pnpm-lock.yaml                      | 52 ++++++++++++++++++-----------
 scripts/package.json                |  1 +
 scripts/seed-traces/seed-traces.mts | 37 ++++++++++++++++++++
 3 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a699849eb1..d78d354b56 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2179,6 +2179,9 @@ importers:
 
   scripts:
     devDependencies:
+      '@faker-js/faker':
+        specifier: 9.9.0
+        version: 9.9.0
       '@graphql-hive/core':
         specifier: workspace:*
         version: link:../packages/libraries/core/dist
@@ -3604,6 +3607,10 @@ packages:
     resolution: {integrity: sha512-o41riCGPiOEStayoikBCAqwa6igbv9L9rP+k5UCfQ24EJD/wGrdDs/KTNwkHG5JzDK3T60D5dMkWkLKEPy8gjA==}
     engines: {node: '>=12'}
 
+  '@faker-js/faker@9.9.0':
+    resolution: {integrity: sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
   '@fastify/accept-negotiator@1.1.0':
     resolution: {integrity: sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==}
     engines: {node: '>=14'}
@@ -11948,6 +11955,9 @@ packages:
   immediate@3.0.6:
     resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
 
+  immer@10.1.1:
+    resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
+
   immer@10.1.3:
     resolution: {integrity: sha512-tmjF/k8QDKydUlm3mZU+tjM6zeq9/fFpPqH9SzWmBnVVKsPBg/V66qsMwb3/Bo90cgUN+ghdVBess+hPsxUyRw==}
 
@@ -17572,8 +17582,8 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17680,11 +17690,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.596.0':
+  '@aws-sdk/client-sso-oidc@3.596.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17723,6 +17733,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
+      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.723.0(@aws-sdk/client-sts@3.723.0)':
@@ -17856,11 +17867,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sts@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)':
+  '@aws-sdk/client-sts@3.596.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17899,7 +17910,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
-      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/client-sts@3.723.0':
@@ -18013,7 +18023,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-ini@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/credential-provider-env': 3.587.0
       '@aws-sdk/credential-provider-http': 3.596.0
       '@aws-sdk/credential-provider-process': 3.587.0
@@ -18132,7 +18142,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.587.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
+      '@aws-sdk/client-sts': 3.596.0
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/types': 3.7.2
@@ -18307,7 +18317,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/shared-ini-file-loader': 3.1.12
@@ -19457,6 +19467,8 @@ snapshots:
 
   '@esm2cjs/strip-final-newline@3.0.1-cjs.0': {}
 
+  '@faker-js/faker@9.9.0': {}
+
   '@fastify/accept-negotiator@1.1.0': {}
 
   '@fastify/ajv-compiler@3.6.0':
@@ -25783,8 +25795,8 @@ snapshots:
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3)
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-config-prettier: 9.1.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-jsonc: 2.11.1(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-mdx: 3.0.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
@@ -28702,13 +28714,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       debug: 4.4.1(supports-color@8.1.1)
       enhanced-resolve: 5.17.1
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -28739,14 +28751,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3)
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
     transitivePeerDependencies:
       - supports-color
 
@@ -28762,7 +28774,7 @@ snapshots:
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-compat-utils: 0.1.2(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -28772,7 +28784,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
@@ -30410,6 +30422,8 @@ snapshots:
 
   immediate@3.0.6: {}
 
+  immer@10.1.1: {}
+
   immer@10.1.3: {}
 
   immutable@3.7.6: {}
diff --git a/scripts/package.json b/scripts/package.json
index 9238db33a1..336898f508 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -3,6 +3,7 @@
   "type": "module",
   "private": true,
   "devDependencies": {
+    "@faker-js/faker": "9.9.0",
     "@graphql-hive/core": "workspace:*",
     "immer": "10.1.1"
   }
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 2aab743fbb..13657a5c78 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -3,6 +3,7 @@ import * as fs from 'node:fs/promises';
 import * as path from 'node:path';
 import * as date from 'date-fns';
 import * as immer from 'immer';
+import * as faker from '@faker-js/faker';
 
 // This is just copy pasted here to infer the TS type
 // Please feel free to collapse this section.
@@ -532,6 +533,36 @@ function toTimeUnixNano(date = new Date()) {
   return nanoseconds;
 }
 
+function getRandomIndex(length: number) {
+  return Math.floor(Math.random() * length);
+}
+
+function randomArrayItem<T>(arr: Array<T>) {
+  return arr[getRandomIndex(appVersions.size)];
+}
+
+const clientNames = ['sales-app', 'product-cron-sync', 'analytics-dashboard'];
+
+const appVersions = new Map<string, Array<string>>();
+
+for (const name of clientNames) {
+  const versions = new Array<string>();
+  for (let i = 0; i <= 10; i++) {
+    versions.push(faker.faker.system.semver());
+  }
+  appVersions.set(name, versions);
+}
+
+function generateRandomClient() {
+  const name = randomArrayItem(clientNames);
+  const version = randomArrayItem(appVersions.get(name)!);
+
+  return {
+    name,
+    version,
+  };
+}
+
 function mutate(currentTime: Date, reference: Reference) {
   const newTraceId = randomId();
   const newSpanIds = new Map<string, string>();
@@ -556,6 +587,11 @@ function mutate(currentTime: Date, reference: Reference) {
         for (const span of scopeSpan.spans) {
           if (span.parentSpanId === undefined) {
             rootTrace = span;
+            const client = generateRandomClient();
+            rootTrace.attributes['hive.client.name'] = client.name;
+            rootTrace.attributes['hive.client.version'] = client.version;
+            // TODO: actually calculate this based on the operation.
+            rootTrace.attributes['hive.graphql.operation.hash'] = faker.faker.git.commitSha();
             break;
           }
         }
@@ -577,6 +613,7 @@ function mutate(currentTime: Date, reference: Reference) {
           if (span.parentSpanId) {
             span.parentSpanId = getNewSpanId(span.parentSpanId);
           }
+
           span.spanId = getNewSpanId(span.spanId);
           span.traceId = newTraceId;
 

From 969b5a7215f1e4d46cd23243ffba5a3c4c37ca2e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 13:55:56 +0200
Subject: [PATCH 043/123] =?UTF-8?q?=E3=81=9F=E3=81=84=E3=81=B8=E3=82=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 scripts/seed-traces/seed-traces.mts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 13657a5c78..947135f0bb 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -588,10 +588,22 @@ function mutate(currentTime: Date, reference: Reference) {
           if (span.parentSpanId === undefined) {
             rootTrace = span;
             const client = generateRandomClient();
-            rootTrace.attributes['hive.client.name'] = client.name;
-            rootTrace.attributes['hive.client.version'] = client.version;
-            // TODO: actually calculate this based on the operation.
-            rootTrace.attributes['hive.graphql.operation.hash'] = faker.faker.git.commitSha();
+
+            rootTrace.attributes.push(
+              {
+                key: 'hive.client.name',
+                value: { stringValue: client.name },
+              },
+              {
+                key: 'hive.client.version',
+                value: { stringValue: client.version },
+              },
+              // TODO: actually calculate this based on the operation.
+              {
+                key: 'hive.graphql.operation.hash',
+                value: { stringValue: faker.faker.git.commitSha() },
+              },
+            );
             break;
           }
         }

From c704f89341af41b6c6f1562dd0a0b57da92acc20 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 14:23:43 +0200
Subject: [PATCH 044/123] error codes

---
 .../src/modules/operations/module.graphql.ts  |   5 +
 .../modules/operations/providers/traces.ts    |   7 +-
 .../modules/operations/resolvers/Target.ts    |   6 +
 .../resolvers/TracesFilterOptions.ts          |   8 +
 packages/web/app/src/pages/target-trace.tsx   |   2 +-
 packages/web/app/src/pages/target-traces.tsx  | 152 ++----------------
 scripts/seed-traces/seed-traces.mts           |  32 +++-
 7 files changed, 72 insertions(+), 140 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 0bf6f25317..5d9aa5f982 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -358,6 +358,10 @@ export default gql`
     """
     operationTypes: [GraphQLOperationType!]
     """
+    Filter based on the client name.
+    """
+    clientNames: [String!]
+    """
     Filter based on the HTTP status code of the request.
     """
     httpStatusCodes: [String!]
@@ -391,6 +395,7 @@ export default gql`
     errorCode(top: Int): [FilterStringOption!]!
     operationType: [FilterStringOption!]!
     operationName(top: Int): [FilterStringOption!]!
+    clientName(top: Int): [FilterStringOption!]!
     httpStatusCode(top: Int): [FilterStringOption!]!
     httpMethod(top: Int): [FilterStringOption!]!
     httpHost(top: Int): [FilterStringOption!]!
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 82c0673ee2..5a534dc226 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -153,8 +153,6 @@ export class Traces {
     const endDate = filter.period?.to ?? new Date();
     const startDate = filter.period?.from ?? subDays(endDate, 14);
 
-    // TODO: Find unit and range units based on filter.start and filter.end
-    //
     const { unit, count: rangeUnits } = getBucketUnitAndCount(startDate, endDate);
 
     const bucketFunctionName = {
@@ -280,6 +278,7 @@ type TraceFilter = {
   errorCodes: ReadonlyArray<string> | null;
   operationNames: ReadonlyArray<string> | null;
   operationTypes: ReadonlyArray<string> | null;
+  clientNames: ReadonlyArray<string> | null;
   subgraphNames: ReadonlyArray<string> | null;
   httpStatusCodes: ReadonlyArray<string> | null;
   httpMethods: ReadonlyArray<string> | null;
@@ -341,6 +340,10 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false)
     ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
   }
 
+  if (filter?.clientNames?.length) {
+    ANDs.push(sql`"client_name" IN (${sql.array(filter.clientNames, 'String')})`);
+  }
+
   if (filter?.subgraphNames?.length) {
     ANDs.push(sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames, 'String')}))`);
   }
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index fa8553a6a5..641c5c1fdf 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -91,6 +91,7 @@ export const Target: Pick<
       errorCodes: filter?.errorCodes ?? null,
       operationNames: filter?.operationNames ?? null,
       operationTypes: filter?.operationTypes ?? null,
+      clientNames: filter?.clientNames ?? null,
       subgraphNames: filter?.subgraphNames ?? null,
       httpMethods: filter?.httpMethods ?? null,
       httpStatusCodes: filter?.httpStatusCodes ?? null,
@@ -130,6 +131,10 @@ export const Target: Pick<
       ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
     }
 
+    if (filter?.clientNames?.length) {
+      ANDs.push(sql`"client_name" IN (${sql.array(filter.clientNames, 'String')})`);
+    }
+
     if (filter?.subgraphNames?.length) {
       ANDs.push(
         sql`hasAny("subgraph_names", (${sql.array(filter.subgraphNames.flat(), 'String')}))`,
@@ -237,6 +242,7 @@ export const Target: Pick<
       errorCodes: filter?.errorCodes ?? null,
       operationNames: filter?.operationNames ?? null,
       operationTypes: filter?.operationTypes ?? null,
+      clientNames: filter?.clientNames ?? null,
       subgraphNames: filter?.subgraphNames ?? null,
       httpMethods: filter?.httpMethods ?? null,
       httpStatusCodes: filter?.httpStatusCodes ?? null,
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index 31eb12a60a..10945e1cb3 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -94,4 +94,12 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
       arrayJoinColumn: 'graphql_error_codes',
     });
   },
+  clientName: async ({ loader }, { top }) => {
+    return loader.load({
+      key: 'client_name',
+      columnExpression: 'client_name',
+      limit: top ?? 10,
+      arrayJoinColumn: null,
+    });
+  },
 };
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index f2cb5e5984..8217825eb7 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1454,7 +1454,7 @@ type CopyIconButtonProps = {
   value: string;
 };
 
-function CopyIconButton(props: CopyIconButtonProps) {
+export function CopyIconButton(props: CopyIconButtonProps) {
   const clipboard = useClipboard();
   return (
     <TooltipProvider>
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index eb366f2e0d..f411bdea34 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -52,7 +52,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import * as dateMath from '../lib/date-math';
-import { TraceSheet as ImportedTraceSheet } from './target-trace';
+import { CopyIconButton, TraceSheet as ImportedTraceSheet } from './target-trace';
 import {
   DurationFilter,
   MultiInputFilter,
@@ -194,22 +194,6 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
   );
 });
 
-type Trace = {
-  id: string;
-  timestamp: number;
-  duration: number;
-  status: 'ok' | 'error';
-  kind: 'query' | 'mutation' | 'subscription';
-  operationName: string;
-  operationHash: string;
-  httpStatus: number;
-  httpMethod: 'GET' | 'POST';
-  httpHost: string;
-  httpRoute: string;
-  httpUrl: string;
-  subgraphNames: string[];
-};
-
 const TargetTracesSortShape = z
   .array(
     z.object({
@@ -260,6 +244,7 @@ const TracesList_Trace = graphql(`
     httpHost
     httpRoute
     httpUrl
+    operationHash
   }
 `);
 
@@ -435,9 +420,6 @@ const TracesList = memo(function TracesList(
             <Tooltip disableHoverableContent delayDuration={100}>
               <TooltipTrigger asChild>
                 <div className="flex items-center gap-2 px-4 text-xs">
-                  <span className="text-muted-foreground font-mono">
-                    {Math.random().toString(16).substring(2, 6)}
-                  </span>
                   <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
                     {row.original.operationType.substring(0, 1).toUpperCase()}
                   </span>
@@ -460,7 +442,7 @@ const TracesList = memo(function TracesList(
                     },
                     {
                       key: 'Hash',
-                      value: Math.random().toString(16).substring(2),
+                      value: row.original.operationHash,
                     },
                   ]}
                 />
@@ -1144,7 +1126,8 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
             </SheetTitle>
           </div>
           <SheetDescription className="mt-1 text-xs text-gray-400">
-            Trace ID: <span className="font-mono">1a2b3c4d5e6f7g8h9i0j</span>
+            Trace ID: <span className="font-mono">{trace.id}</span>
+            <CopyIconButton value={trace.id} label="Copy Trace ID" />
           </SheetDescription>
           <div className="mt-2 flex items-center gap-3 text-xs">
             <div className="flex items-center gap-1">
@@ -1194,26 +1177,6 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
   );
 }
 
-function SearchBar(props: { onFiltersOpenChange: () => void }) {
-  return null;
-
-  // return (
-  //   <div className="flex gap-x-4">
-  //     <Button
-  //       variant="outline"
-  //       className="bg-background size-10 p-0"
-  //       onClick={props.onFiltersOpenChange}
-  //     >
-  //       <FilterIcon className="size-4" />
-  //     </Button>
-  //     <div className="relative w-full">
-  //       <SearchIcon className="text-muted-foreground absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2" />
-  //       <Input type="search" className="pl-9" placeholder="Search..." {...props} />
-  //     </div>
-  //   </div>
-  // );
-}
-
 const TargetTracesPageQuery = graphql(`
   query TargetTracesPageQuery(
     $targetRef: TargetSelectorInput!
@@ -1247,6 +1210,10 @@ const TargetTracesPageQuery = graphql(`
           value
           count
         }
+        clientName(top: $filterTopN) {
+          value
+          count
+        }
         httpStatusCode(top: $filterTopN) {
           value
           count
@@ -1314,6 +1281,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         errorCodes: props.filter['graphql.errorCode'],
         operationNames: props.filter['graphql.operation'],
         operationTypes: props.filter['graphql.kind'] as any,
+        clientNames: props.filter['graphql.client'],
         subgraphNames: props.filter['graphql.subgraph'],
         httpStatusCodes: props.filter['http.status'],
         httpMethods: props.filter['http.method'],
@@ -1406,7 +1374,13 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           label: option.value,
           count: option.count,
         })) ?? [],
-      'graphql.client': [],
+      'graphql.client':
+        options?.clientName.map(option => ({
+          value: option.value,
+          searchContent: option.value,
+          label: option.value,
+          count: option.count,
+        })) ?? [],
     };
   }, [query.data?.target?.tracesFilterOptions]);
 
@@ -1433,7 +1407,6 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         <SidebarInset className="bg-transparent">
           <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
             <div>
-              <SearchBar onFiltersOpenChange={() => setFiltersOpen(isOpen => !isOpen)} />
               <Traffic buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
             </div>
             <TracesList
@@ -1495,97 +1468,6 @@ export function TargetTracesPage(
   );
 }
 
-function TreeIcon(props: {
-  level: number;
-  /**
-   * Decides whether or not to draw the └[]
-   */
-  hasParent: boolean;
-  /**
-   * Decides whether or not to draw
-   */
-  isLeaf: boolean;
-  /**
-   * Wheter or not to draw ├
-   */
-  isLastChild: boolean;
-  childrenCount: number;
-  isCollapsed: boolean;
-  lines: boolean[];
-  onClick?: () => void;
-}) {
-  const levelWidth = 16;
-  const base = 30;
-  const width = base + props.level * levelWidth;
-
-  const leftSideEdgeStart = (props.level - 1) * levelWidth + 12;
-  const leftSideEdgeEnd = leftSideEdgeStart + 15;
-
-  const rectLeft = 2 + props.level * levelWidth;
-
-  return (
-    <svg
-      width={width}
-      height="100%"
-      preserveAspectRatio="xMidYMid meet"
-      className="shrink"
-      onClick={props.onClick}
-    >
-      {/* left-side line */}
-      {props.hasParent ? (
-        <line x1={leftSideEdgeStart} y1="16" x2={leftSideEdgeEnd} y2="16" stroke="currentColor" />
-      ) : null}
-
-      {/* bottom line */}
-      {props.isLeaf || props.isCollapsed ? null : (
-        <line x1={rectLeft + 10} x2={rectLeft + 10} y1="16" y2="32" stroke="currentColor" />
-      )}
-
-      {/* leaf span */}
-      {props.isLeaf ? (
-        <circle cx={props.level * 16 + 12} cy="16" r="3" fill="currentColor"></circle>
-      ) : (
-        // number block
-        <>
-          <rect
-            x={rectLeft}
-            y="8"
-            width="20"
-            height="16"
-            rx="3px"
-            ry="3px"
-            fill={props.isCollapsed ? 'currentColor' : 'black'}
-            stroke="currentColor"
-          />
-          <text
-            x={rectLeft + 10}
-            y="20"
-            style={{ fontSize: 10 }}
-            textAnchor="middle"
-            fontWeight={props.isCollapsed ? 700 : 500}
-            fill={props.isCollapsed ? 'white' : 'currentColor'}
-          >
-            {props.childrenCount}
-          </text>
-        </>
-      )}
-
-      {/* this line is the vertical line (for each parent groups) */}
-      {props.lines.map((line, index) =>
-        line ? (
-          <line
-            x1={16 * (index + 1) - 4}
-            x2={16 * (index + 1) - 4}
-            y1="0"
-            y2={index === props.level - 1 && props.isLastChild ? 16 : 32}
-            stroke="currentColor"
-          />
-        ) : null,
-      )}
-    </svg>
-  );
-}
-
 function GridTable(props: {
   rows: Array<{
     key: string;
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 947135f0bb..7a0d862417 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -563,6 +563,21 @@ function generateRandomClient() {
   };
 }
 
+const errorCodes = [
+  'INTERNAL_SERVER_ERROR',
+  'ERR_UNAUTHENTICATED',
+  'ERR_TEAPOD_NOT_FOUND',
+  'ERR_NOT_FOUND',
+];
+
+function getRandomErrorCodes() {
+  if (Math.random() > 0.2) {
+    return '';
+  }
+
+  return [randomArrayItem(errorCodes)];
+}
+
 function mutate(currentTime: Date, reference: Reference) {
   const newTraceId = randomId();
   const newSpanIds = new Map<string, string>();
@@ -604,6 +619,21 @@ function mutate(currentTime: Date, reference: Reference) {
                 value: { stringValue: faker.faker.git.commitSha() },
               },
             );
+
+            const errors = getRandomErrorCodes();
+
+            if (errors) {
+              rootTrace.attributes.push(
+                {
+                  key: 'hive.graphql.error.codes',
+                  value: { stringValue: errors.join(',') },
+                },
+                {
+                  key: 'hive.graphql.error.count',
+                  value: { stringValue: String(errors.length) },
+                },
+              );
+            }
             break;
           }
         }
@@ -636,8 +666,6 @@ function mutate(currentTime: Date, reference: Reference) {
           const newStartTime = currentTimeB + spanOffset;
           span.startTimeUnixNano = newStartTime.toString();
           span.endTimeUnixNano = (newStartTime + spanDuration).toString();
-
-          // TODO figure out a way to ranomly add errors
         }
       }
     }

From a7608a5fc37767c83a6321e52f3e06cf0ffc57cc Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 14:30:09 +0200
Subject: [PATCH 045/123] each trace shall be unique

---
 scripts/seed-traces/seed-traces.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 7a0d862417..0a9ffcccd6 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -735,8 +735,8 @@ while (currentDate.getTime() < now.getTime()) {
   const promises: Array<Promise<unknown>> = [];
 
   for (const reference of references) {
-    const tracePayloads = createTrace(currentDate, reference);
     for (let i = randomInt(10); i > 0; i--) {
+      const tracePayloads = createTrace(currentDate, reference);
       promises.push(
         ...tracePayloads.map(body =>
           fetch(otelEndpointUrl, {

From 454517dc55e3d6b6ae82d4f4ede3b4006025f044 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 15:16:12 +0200
Subject: [PATCH 046/123] fix scroll area unlimited width

---
 packages/web/app/src/components/ui/scroll-area.tsx | 3 ++-
 packages/web/app/src/pages/target-trace.tsx        | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/web/app/src/components/ui/scroll-area.tsx b/packages/web/app/src/components/ui/scroll-area.tsx
index 705765d058..48a15141cf 100644
--- a/packages/web/app/src/components/ui/scroll-area.tsx
+++ b/packages/web/app/src/components/ui/scroll-area.tsx
@@ -11,7 +11,8 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+    {/** LOL https://github.com/radix-ui/primitives/issues/2722 */}
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit] [&>div]:!block">
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 8217825eb7..bfe4c45cb3 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -678,13 +678,13 @@ export function TraceSheet(props: TraceSheetProps) {
     [trace.spans],
   );
   const rootSpanUnmasked = useFragment(SpanFragment, rootSpan.span);
-
   const spanAttributes: Array<TraceAttribute> = Array.from(
     Object.entries(rootSpanUnmasked.spanAttributes),
   ).map(([name, value]) => ({
     name,
     value: String(value),
   }));
+
   const resourceAttributes: Array<TraceAttribute> = Array.from(
     Object.entries(rootSpanUnmasked.resourceAttributes),
   ).map(([name, value]) => ({

From ef5b55d6c0b0e619be0eb456b833171c1f479599 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 7 Jul 2025 15:20:07 +0200
Subject: [PATCH 047/123] some security

---
 .../services/api/src/modules/operations/providers/traces.ts  | 5 ++---
 .../services/api/src/modules/operations/resolvers/Trace.ts   | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 5a534dc226..54cc7583ee 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -69,7 +69,7 @@ export class Traces {
     return trace;
   }
 
-  async findSpansForTraceId(traceId: string): Promise<Array<Span>> {
+  async findSpansForTraceId(traceId: string, targetId: string): Promise<Array<Span>> {
     this.logger.debug('find spans for trace (traceId=%s)', traceId);
     const result = await this.clickHouse.query<unknown>({
       query: sql`
@@ -79,13 +79,12 @@ export class Traces {
           "otel_traces"
         WHERE
           "TraceId" = ${traceId}
+          AND "SpanAttributes"['hive.target_id'] = ${targetId}
       `,
       timeout: 10_000,
       queryId: 'Traces.findSpansForTraceId',
     });
 
-    console.log(result.data);
-
     return SpanListModel.parse(result.data);
   }
 
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
index 01e7f1f443..a4778991c0 100644
--- a/packages/services/api/src/modules/operations/resolvers/Trace.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -31,7 +31,7 @@ export const Trace: TraceResolvers = {
     return trace.graphqlOperationType;
   },
   spans(trace, _arg, { injector }) {
-    return injector.get(Traces).findSpansForTraceId(trace.traceId);
+    return injector.get(Traces).findSpansForTraceId(trace.traceId, trace.targetId);
   },
   subgraphs(trace) {
     return trace.subgraphNames;

From bf56e816bef638b19b213012c026f1dc14737b73 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 8 Jul 2025 15:35:47 +0200
Subject: [PATCH 048/123] span events

---
 .../src/modules/operations/module.graphql.ts  |   7 +
 .../modules/operations/providers/traces.ts    |  37 +-
 packages/web/app/src/pages/target-trace.tsx   | 457 +++++++++++++-----
 packages/web/app/src/router.tsx               |   4 +-
 scripts/seed-traces/seed-traces.mts           |  38 +-
 5 files changed, 413 insertions(+), 130 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 5d9aa5f982..46b2820116 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -310,6 +310,12 @@ export default gql`
     spans: [Span!]!
   }
 
+  type SpanEvent {
+    date: DateTime64!
+    name: String!
+    attributes: JSONObject!
+  }
+
   type Span {
     id: ID!
     traceId: ID!
@@ -320,6 +326,7 @@ export default gql`
     endTime: DateTime64!
     resourceAttributes: JSONObject!
     spanAttributes: JSONObject!
+    events: [SpanEvent!]!
   }
 
   input DurationInput {
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 54cc7583ee..77a31040c6 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -392,19 +392,34 @@ const spanFields = sql`
   , replaceOne(concat(toDateTime64(addNanoseconds("Timestamp", "Duration"), 9, 'UTC'), 'Z'), ' ', 'T') AS "endDate"
   , "Duration" AS "duration"
   , "ParentSpanId" AS "parentSpanId"
+  , arrayMap(x -> replaceOne(concat(toDateTime64(x, 9, 'UTC'), 'Z'), ' ', 'T'),"Events.Timestamp") AS "eventsTimestamps"
+  , "Events.Name" AS "eventsName"
+  , "Events.Attributes" AS "eventsAttributes"
 `;
 
-const SpanModel = z.object({
-  traceId: z.string(),
-  spanId: z.string(),
-  spanName: z.string(),
-  resourceAttributes: z.record(z.string(), z.unknown()),
-  spanAttributes: z.record(z.string(), z.unknown()),
-  startDate: z.string(),
-  endDate: z.string(),
-  duration: z.string().transform(value => parseFloat(value)),
-  parentSpanId: z.string().transform(value => value || null),
-});
+const SpanModel = z
+  .object({
+    traceId: z.string(),
+    spanId: z.string(),
+    spanName: z.string(),
+    resourceAttributes: z.record(z.string(), z.unknown()),
+    spanAttributes: z.record(z.string(), z.unknown()),
+    startDate: z.string(),
+    endDate: z.string(),
+    duration: z.string().transform(value => parseFloat(value)),
+    parentSpanId: z.string().transform(value => value || null),
+    eventsTimestamps: z.array(z.string()),
+    eventsName: z.array(z.string()),
+    eventsAttributes: z.array(z.record(z.string(), z.string())),
+  })
+  .transform(({ eventsTimestamps, eventsName, eventsAttributes, ...span }) => ({
+    ...span,
+    events: eventsTimestamps.map((date, index) => ({
+      date,
+      name: eventsName[index],
+      attributes: eventsAttributes[index],
+    })),
+  }));
 
 const SpanListModel = z.array(SpanModel);
 
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index bfe4c45cb3..78f4bbab52 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1,4 +1,12 @@
-import { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   AlertTriangle,
   ArrowUp,
@@ -407,7 +415,7 @@ type NodeElementProps = {
 function NodeElement(props: NodeElementProps) {
   return (
     <div
-      className={cn('absolute z-20 block h-6 min-w-[1px] select-none rounded-sm')}
+      className={cn('relative z-20 block h-6 min-w-[1px] select-none rounded-sm')}
       style={{
         left: `min(${props.leftPositionPercentage}%, 100% - 1px)`,
         width: `${props.widthPercentage}%`,
@@ -455,9 +463,21 @@ function SpanNode(props: SpanNodeProps) {
   const canBeCollapsed = props.span.children.length > 0;
   const parentColor = props.parentColor ?? props.color;
 
+  const hasException = span.events.some(event => event.name === 'exception');
+  const highlightedEvent = useContext(HighlightedEventContext);
+  const activeSpanId = useContext(ActiveSpanIdContext);
+
   return (
     <>
-      <div className="pr-8 odd:bg-gray-800/20 hover:bg-gray-900">
+      <div
+        className={cn(
+          'pr-8 odd:bg-gray-800/20 hover:bg-gray-900',
+          hasException && 'bg-red-900/20 odd:bg-red-900/20 hover:bg-red-900',
+          highlightedEvent &&
+            (highlightedEvent.spanId === span.id ? 'bg-red-900 odd:bg-red-900' : 'opacity-30'),
+          activeSpanId && activeSpanId !== span.id && 'opacity-30',
+        )}
+      >
         <div className="relative flex h-8 w-full items-center overflow-hidden">
           <div
             className="relative flex h-8 shrink-0 items-center gap-x-2 overflow-hidden pl-1"
@@ -482,9 +502,20 @@ function SpanNode(props: SpanNodeProps) {
               />
             </div>
             <div
-              className={cn('whitespace-nowrap text-xs', isDimmed ? 'text-gray-500' : 'text-white')}
+              className={cn(
+                'flex w-full items-center whitespace-nowrap align-middle text-xs',
+                isDimmed ? 'text-gray-500' : 'text-white',
+              )}
             >
-              {span.name}
+              <span className="mr-1">{span.name}</span>
+              {hasException && (
+                <Badge
+                  variant="outline"
+                  className="font-small ml-auto mr-1 rounded-sm border-0 bg-red-900/30 px-1 font-mono text-xs font-medium uppercase text-red-400"
+                >
+                  Error
+                </Badge>
+              )}
             </div>
             {span.spanAttributes['gateway.upstream.subgraph.name'] ? (
               <div
@@ -497,29 +528,31 @@ function SpanNode(props: SpanNodeProps) {
               </div>
             ) : null}
           </div>
-          <Link
-            className={cn(
-              'relative flex h-full grow cursor-pointer items-center overflow-hidden',
-              isDimmed ? 'opacity-25' : '',
-            )}
-            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
-            params={{
-              organizationSlug: props.organizationSlug,
-              projectSlug: props.projectSlug,
-              targetSlug: props.targetSlug,
-              traceId: props.traceId,
-            }}
-            search={{ activeSpanId: span.id }}
-          >
+          <div className="relative w-full">
             <Tooltip disableHoverableContent delayDuration={100}>
               <TooltipTrigger asChild>
-                <NodeElement
-                  color={props.color}
-                  isNearRightEdge={isNearRightEdge}
-                  leftPositionPercentage={leftPositionPercentage}
-                  widthPercentage={widthPercentage}
-                  durationStr={formatNanoseconds(props.span.durationNs)}
-                />
+                <Link
+                  className={cn(
+                    'relative flex h-full grow cursor-pointer items-center overflow-hidden',
+                    isDimmed ? 'opacity-25' : '',
+                  )}
+                  to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                  params={{
+                    organizationSlug: props.organizationSlug,
+                    projectSlug: props.projectSlug,
+                    targetSlug: props.targetSlug,
+                    traceId: props.traceId,
+                  }}
+                  search={{ activeSpanId: span.id }}
+                >
+                  <NodeElement
+                    color={props.color}
+                    isNearRightEdge={isNearRightEdge}
+                    leftPositionPercentage={leftPositionPercentage}
+                    widthPercentage={widthPercentage}
+                    durationStr={formatNanoseconds(props.span.durationNs)}
+                  />
+                </Link>
               </TooltipTrigger>
               <TooltipContent
                 side="bottom"
@@ -583,7 +616,71 @@ function SpanNode(props: SpanNodeProps) {
                 </div>
               </TooltipContent>
             </Tooltip>
-          </Link>
+
+            {props.span.events.map(event => {
+              if (highlightedEvent && event.id !== highlightedEvent.eventId) {
+                return null;
+              }
+
+              const leftPercentage = roundFloatToTwoDecimals(
+                (nanosecondsToMilliseconds(event.timeNs) /
+                  nanosecondsToMilliseconds(props.totalDurationNs)) *
+                  100,
+              );
+              const isError = event.name === 'exception';
+
+              return (
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger asChild>
+                    <Link
+                      className={cn(
+                        'absolute bottom-0 top-0 z-50 translate-x-[-50%] cursor-pointer px-1',
+                      )}
+                      style={{ left: `${leftPercentage}%` }}
+                      to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                      params={{
+                        organizationSlug: props.organizationSlug,
+                        projectSlug: props.projectSlug,
+                        targetSlug: props.targetSlug,
+                        traceId: props.traceId,
+                      }}
+                      search={{ activeSpanId: span.id, activeSpanTab: 'events' }}
+                    >
+                      <div className="relative h-full">
+                        <div
+                          className={cn(
+                            'absolute bottom-0 top-0 w-0.5',
+                            isError ? 'bg-red-500' : 'bg-yellow-500',
+                          )}
+                        >
+                          <div
+                            className={cn(
+                              'absolute -left-[3px] -top-[2px] h-2 w-2',
+                              isError ? 'bg-red-500' : 'bg-yellow-500',
+                            )}
+                          />
+                        </div>
+                      </div>
+                    </Link>
+                  </TooltipTrigger>
+                  <TooltipContent
+                    side="bottom"
+                    className="overflow-hidden rounded-lg border-none p-0 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
+                  >
+                    <div className="z-20">
+                      <ExceptionTeaser
+                        key={event.id}
+                        type={String(event.attributes['exception.type'] ?? '')}
+                        message={String(event.attributes['exception.message'] ?? '')}
+                        stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
+                        name={event.name}
+                      />
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
         </div>
       </div>
       {collapsed
@@ -629,24 +726,6 @@ function SpanNode(props: SpanNodeProps) {
   );
 }
 
-// function GridTable(props: {
-//   rows: Array<{
-//     key: string;
-//     value: ReactNode;
-//   }>;
-// }) {
-//   return (
-//     <div className="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
-//       {props.rows.map(row => (
-//         <Fragment key={row.key}>
-//           <div className="font-sans text-gray-400">{row.key}</div>
-//           <div className="text-right font-mono">{row.value}</div>
-//         </Fragment>
-//       ))}
-//     </div>
-//   );
-// }
-
 const TraceSheet_TraceFragment = graphql(`
   fragment TraceSheet_TraceFragment on Trace {
     id
@@ -662,18 +741,29 @@ const TraceSheet_TraceFragment = graphql(`
 type TraceSheetProps = {
   trace: FragmentType<typeof TraceSheet_TraceFragment>;
   activeSpanId: string | null;
+  activeSpanTab: string | null;
   organizationSlug: string;
   projectSlug: string;
   targetSlug: string;
 };
 
+type HighlightedEvent = {
+  spanId: string;
+  eventId: string;
+};
+
+const HighlightedEventContext = createContext(null as null | HighlightedEvent);
+const ActiveSpanIdContext = createContext(null as null | string);
+
 export function TraceSheet(props: TraceSheetProps) {
   const [activeView, setActiveView] = useState<
     'span-attributes' | 'resource-attributes' | 'events' | 'operation'
   >('span-attributes');
   const trace = useFragment(TraceSheet_TraceFragment, props.trace);
 
-  const [rootSpan, spanLookupMap] = useMemo(
+  const [highlightedEvent, setHighlightedEvent] = useState<HighlightedEvent | null>(null);
+
+  const { rootSpan, spansById, events } = useMemo(
     () => createSpanTreeStructure(trace.spans),
     [trace.spans],
   );
@@ -707,15 +797,19 @@ export function TraceSheet(props: TraceSheetProps) {
         <ResizablePanelGroup direction="vertical">
           <ResizablePanel defaultSize={70} minSize={20} maxSize={80}>
             <WidthSyncProvider defaultWidth={251}>
-              <TraceView
-                rootSpan={rootSpan}
-                serviceNames={trace.subgraphs}
-                totalTraceDuration={totalTraceDuration}
-                organizationSlug={props.organizationSlug}
-                projectSlug={props.projectSlug}
-                targetSlug={props.targetSlug}
-                traceId={trace.id}
-              />
+              <HighlightedEventContext.Provider value={highlightedEvent}>
+                <ActiveSpanIdContext.Provider value={props.activeSpanId}>
+                  <TraceView
+                    rootSpan={rootSpan}
+                    serviceNames={trace.subgraphs}
+                    totalTraceDuration={totalTraceDuration}
+                    organizationSlug={props.organizationSlug}
+                    projectSlug={props.projectSlug}
+                    targetSlug={props.targetSlug}
+                    traceId={trace.id}
+                  />
+                </ActiveSpanIdContext.Provider>
+              </HighlightedEventContext.Provider>
             </WidthSyncProvider>
           </ResizablePanel>
           <ResizableHandle withHandle />
@@ -755,7 +849,7 @@ export function TraceSheet(props: TraceSheetProps) {
                       </div>
                     </div>
                   </TabButton>
-                  {/* <TabButton
+                  <TabButton
                     isActive={activeView === 'events'}
                     onClick={() => setActiveView('events')}
                   >
@@ -770,13 +864,13 @@ export function TraceSheet(props: TraceSheetProps) {
                         </Badge>
                       </div>
                     </div>
-                  </TabButton> */}
+                  </TabButton>
                   <TabButton
                     isActive={activeView === 'operation'}
                     onClick={() => setActiveView('operation')}
                   >
                     <div className="flex items-center gap-x-2">
-                      <div>Operation</div>
+                      <div>GraphQL Operation</div>
                     </div>
                   </TabButton>
                 </div>
@@ -823,52 +917,41 @@ export function TraceSheet(props: TraceSheetProps) {
                       )}
                     </div>
                   ) : null}
-                  {/* {activeView === 'events' ? (
+                  {activeView === 'events' ? (
                     <div className="p-4">
                       <div className="space-y-2">
-                        {[
-                          {
-                            code: 'DB_CONNECTION_ERROR',
-                            message: 'Connection to database timed out after 5 seconds',
-                            stacktrace: `Error: Connection to database timed out\n\tat PostgresClient.connect (/app/db.js:42:3)\n\tat ProductService.getProducts (/app/services/product.js:15:5)`,
-                          },
-                          {
-                            code: 'GRAPHQL_PARSE_FAILED',
-                            message: 'Sent GraphQL Operation cannot be parsed',
-                          },
-                          {
-                            code: 'TIMEOUT_ERROR',
-                            message: 'Operation timed out after 10 seconds',
-                          },
-                        ].map((exception, index) => (
-                          <div
-                            key={index}
-                            className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20"
+                        {events.map(event => (
+                          <Link
+                            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                            params={{
+                              organizationSlug: props.organizationSlug,
+                              projectSlug: props.projectSlug,
+                              targetSlug: props.targetSlug,
+                              traceId: trace.id,
+                            }}
+                            search={{ activeSpanId: event.spanId, activeSpanTab: 'events' }}
+                            onMouseOver={() =>
+                              setHighlightedEvent({
+                                spanId: event.spanId,
+                                eventId: event.id,
+                              })
+                            }
+                            onMouseLeave={() => {
+                              setHighlightedEvent(null);
+                            }}
                           >
-                            <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
-                              <span className="font-mono text-xs font-medium text-red-300">
-                                {exception.code}
-                              </span>
-                              <Badge
-                                variant="outline"
-                                className="border-red-700 bg-red-950 text-[10px] text-red-300"
-                              >
-                                Exception
-                              </Badge>
-                            </div>
-                            <div className="p-3 text-xs">
-                              <p className="text-gray-300">{exception.message}</p>
-                              {exception.stacktrace && (
-                                <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
-                                  {exception.stacktrace}
-                                </pre>
-                              )}
-                            </div>
-                          </div>
+                            <ExceptionTeaser
+                              key={event.id}
+                              type={String(event.attributes['exception.type'] ?? '')}
+                              message={String(event.attributes['exception.message'] ?? '')}
+                              stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
+                              name={event.name}
+                            />
+                          </Link>
                         ))}
                       </div>
                     </div>
-                  ) : null} */}
+                  ) : null}
                   {activeView === 'operation' ? (
                     <div className="absolute bottom-0 top-0 w-full">
                       <GraphQLHighlight
@@ -890,7 +973,7 @@ export function TraceSheet(props: TraceSheetProps) {
       {props.activeSpanId && (
         <SpanSheet
           span={trace.spans.find(trace => trace.id === props.activeSpanId) ?? null}
-          computedSpanMetrics={spanLookupMap.get(props.activeSpanId) ?? null}
+          computedSpanMetrics={spansById.get(props.activeSpanId) ?? null}
           onClose={() =>
             navigate({
               to: '/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId',
@@ -901,6 +984,7 @@ export function TraceSheet(props: TraceSheetProps) {
           projectSlug={props.projectSlug}
           targetSlug={props.targetSlug}
           traceId={trace.id}
+          activeTab={props.activeSpanTab}
         />
       )}
     </div>
@@ -913,6 +997,7 @@ function TargetInsightsNewPageContent(props: {
   targetSlug: string;
   traceId: string;
   activeSpanId: string | null;
+  activeSpanTab: string | null;
 }) {
   const [result] = useQuery({
     query: TargetTraceQuery,
@@ -937,6 +1022,7 @@ function TargetInsightsNewPageContent(props: {
       targetSlug={props.targetSlug}
       trace={result.data.target.trace}
       activeSpanId={props.activeSpanId}
+      activeSpanTab={props.activeSpanTab}
     />
   );
 }
@@ -947,6 +1033,7 @@ export function TargetTracePage(props: {
   targetSlug: string;
   traceId: string;
   activeSpanId: string | null;
+  activeSpanTab: string | null;
 }) {
   return (
     <>
@@ -999,6 +1086,11 @@ const SpanFragment = graphql(/* GraphQL */ `
     parentId
     startTime
     endTime
+    events {
+      date
+      name
+      attributes
+    }
   }
 `);
 
@@ -1009,16 +1101,30 @@ type ComputedSpanMetrics = {
   percentageOfParentSpan: string | null;
 };
 
+type SpanEvent = {
+  id: string;
+  spanId: string;
+  name: string;
+  attributes: Record<string, unknown>;
+  type: string;
+  timeNs: bigint;
+};
+
 type SpanFragmentWithChildren = {
   span: FragmentType<typeof SpanFragment>;
   children: Array<SpanFragmentWithChildren>;
+  events: Array<SpanEvent>;
 } & ComputedSpanMetrics;
 
-function createSpanTreeStructure(
-  fragments: Array<FragmentType<typeof SpanFragment>>,
-): [SpanFragmentWithChildren, ReadonlyMap<string, SpanFragmentWithChildren>] {
-  const itemsById = new Map</* id */ string, SpanFragmentWithChildren>();
-  let root: SpanFragmentWithChildren | null = null;
+function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragment>>): {
+  rootSpan: SpanFragmentWithChildren;
+  spansById: ReadonlyMap<string, SpanFragmentWithChildren>;
+  events: ReadonlyArray<SpanEvent>;
+} {
+  const spansById = new Map</* id */ string, SpanFragmentWithChildren>();
+  const events: Array<SpanEvent> = [];
+
+  let rootSpan: SpanFragmentWithChildren | null = null;
   for (const fragment of fragments) {
     const ufragment = useFragment(SpanFragment, fragment);
 
@@ -1029,28 +1135,46 @@ function createSpanTreeStructure(
       startNs: 0n,
       percentageOfTotal: '',
       percentageOfParentSpan: null,
+      events: [],
     };
 
-    itemsById.set(ufragment.id, fragmentWithChildren);
+    spansById.set(ufragment.id, fragmentWithChildren);
     if (ufragment.parentId == null) {
-      root = fragmentWithChildren;
+      rootSpan = fragmentWithChildren;
     }
   }
 
-  if (!root) {
+  if (!rootSpan) {
     throw new Error('No root found.');
   }
 
-  const uroot = useFragment(SpanFragment, root.span);
+  const uroot = useFragment(SpanFragment, rootSpan.span);
   const startNS = parseRFC3339ToEpochNanos(uroot.startTime);
 
-  for (const item of itemsById.values()) {
+  // TODO: this should probably be provided be the backend
+  let eventIdCounter = 0;
+
+  for (const item of spansById.values()) {
     const uitem = useFragment(SpanFragment, item.span);
-    console.log(uitem.parentId);
+
+    for (const event of uitem.events) {
+      eventIdCounter++;
+      const spanEvent: SpanEvent = {
+        id: String(eventIdCounter),
+        spanId: uitem.id,
+        name: event.name,
+        attributes: event.attributes,
+        type: 'exception',
+        timeNs: parseRFC3339ToEpochNanos(event.date) - startNS,
+      };
+      events.push(spanEvent);
+      item.events.push(spanEvent);
+    }
+
     if (!uitem.parentId) {
       continue;
     }
-    const parent = itemsById.get(uitem.parentId);
+    const parent = spansById.get(uitem.parentId);
     if (!parent) {
       throw new Error('Missing parent.');
     }
@@ -1058,7 +1182,8 @@ function createSpanTreeStructure(
     parent.children.push(item);
     item.startNs = parseRFC3339ToEpochNanos(uitem.startTime) - startNS;
     item.percentageOfTotal = (
-      (nanosecondsToMilliseconds(item.durationNs) / nanosecondsToMilliseconds(root.durationNs)) *
+      (nanosecondsToMilliseconds(item.durationNs) /
+        nanosecondsToMilliseconds(rootSpan.durationNs)) *
       100
     ).toFixed(2);
     item.percentageOfParentSpan = (
@@ -1067,7 +1192,7 @@ function createSpanTreeStructure(
     ).toFixed(2);
   }
 
-  for (const item of itemsById.values()) {
+  for (const item of spansById.values()) {
     item.children.sort((a, b) => {
       if (a.startNs < b.startNs) {
         return -1;
@@ -1079,7 +1204,7 @@ function createSpanTreeStructure(
     });
   }
 
-  return [root, itemsById as ReadonlyMap<string, SpanFragmentWithChildren>] as const;
+  return { rootSpan, spansById, events };
 }
 
 function formatNanoseconds(nsBigInt: bigint) {
@@ -1180,6 +1305,11 @@ const SpanSheet_SpanFragment = graphql(`
     name
     duration
     parentId
+    events {
+      name
+      attributes
+      date
+    }
   }
 `);
 
@@ -1191,13 +1321,14 @@ type SpanSheetProps = {
   projectSlug: string;
   targetSlug: string;
   traceId: string;
+  activeTab: string | null;
 };
 
 function SpanSheet(props: SpanSheetProps) {
   const span = useFragment(SpanSheet_SpanFragment, props.span);
-  const [activeView, setActiveView] = useState<'span-attributes' | 'resource-attributes'>(
-    'span-attributes',
-  );
+  const [activeView, setActiveView] = useState<
+    'span-attributes' | 'resource-attributes' | 'events'
+  >((props.activeTab as 'events') ?? 'span-attributes');
   const clipboard = useClipboard();
 
   // TODO: maybe loading or not found state???
@@ -1324,6 +1455,22 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   </div>
                 </TabButton>
+                <TabButton
+                  isActive={activeView === 'events'}
+                  onClick={() => setActiveView('events')}
+                >
+                  <div className="flex items-center gap-x-2">
+                    <div>Events</div>
+                    <div>
+                      <Badge
+                        variant="secondary"
+                        className="rounded-md px-2 py-0.5 text-[10px] font-thin"
+                      >
+                        {span.events.length}
+                      </Badge>
+                    </div>
+                  </div>
+                </TabButton>
               </div>
             </div>
             <div className="overflow-y-scroll">
@@ -1371,6 +1518,36 @@ function SpanSheet(props: SpanSheetProps) {
                   )}
                 </div>
               )}
+              {activeView === 'events' && (
+                <div>
+                  {span.events.length > 0 ? (
+                    <div className="px-1 pt-2">
+                      {span.events.map(event => {
+                        return (
+                          <ExceptionTeaser
+                            type={event.attributes['exception.type'] ?? ''}
+                            message={event.attributes['exception.message'] ?? ''}
+                            stacktrace={event.attributes['exception.stacktrace'] ?? ''}
+                            name={event.name}
+                          />
+                        );
+                        // return (
+                        //   <>
+                        //     {Array.from(Object.entries(event.attributes)).map(([key, value]) => (
+                        //       <AttributeRow key={key} attributeKey={key} value={String(value)} />
+                        //     ))}
+                        //   </>
+                        // );
+                      })}
+                    </div>
+                  ) : (
+                    <div className="py-4 text-center">
+                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <p className="text-xs text-gray-500">No events found for this span.</p>
+                    </div>
+                  )}
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -1474,3 +1651,49 @@ export function CopyIconButton(props: CopyIconButtonProps) {
     </TooltipProvider>
   );
 }
+
+// function ErrorEventMarker(props: { name: string; positionPercentage: string }) {
+//   const isError = props.name === 'exception';
+//   return (
+//     <Link
+//       className={cn(
+//         'absolute bottom-[4px] top-[4px] z-50 w-0.5 cursor-pointer',
+//         isError ? 'bg-red-500' : 'bg-yellow-500',
+//       )}
+//       style={{ left: props.positionPercentage }}
+//     >
+//       <div
+//         className={cn(
+//           'absolute -left-[3px] -top-[2px] h-2 w-2',
+//           isError ? 'bg-red-500' : 'bg-yellow-500',
+//         )}
+//       />
+//     </Link>
+//   );
+// }
+
+function ExceptionTeaser(props: {
+  name: string;
+  message: string;
+  stacktrace: string | null;
+  type: string;
+}) {
+  return (
+    <div className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20">
+      <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
+        <span className="font-mono text-xs font-medium text-red-300">{props.type}</span>
+        <Badge variant="outline" className="border-red-700 bg-red-950 text-[10px] text-red-300">
+          {props.name}
+        </Badge>
+      </div>
+      <div className="p-3 text-xs">
+        <p className="text-gray-300">{props.message}</p>
+        {props.stacktrace && (
+          <pre className="mt-2 overflow-x-auto rounded bg-black/50 p-2 font-mono text-[10px] leading-tight text-gray-400">
+            {props.stacktrace}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index a4cbd80b34..496bb58b61 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -685,6 +685,7 @@ const targetTracesRoute = createRoute({
 
 const TargetTraceRouteSearchModel = z.object({
   activeSpanId: z.string().optional(),
+  activeSpanTab: z.string().optional(),
 });
 
 const targetTraceRoute = createRoute({
@@ -695,7 +696,7 @@ const targetTraceRoute = createRoute({
   path: 'trace/$traceId',
   component: function TargetTraceRoute() {
     const { organizationSlug, projectSlug, targetSlug, traceId } = targetTraceRoute.useParams();
-    const { activeSpanId } = targetTraceRoute.useSearch();
+    const { activeSpanId, activeSpanTab } = targetTraceRoute.useSearch();
     return (
       <TargetTracePage
         organizationSlug={organizationSlug}
@@ -703,6 +704,7 @@ const targetTraceRoute = createRoute({
         targetSlug={targetSlug}
         traceId={traceId}
         activeSpanId={activeSpanId ?? null}
+        activeSpanTab={activeSpanTab ?? null}
       />
     );
   },
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 0a9ffcccd6..35427ff824 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -505,7 +505,34 @@ const reference = [
                   },
                 ],
                 droppedAttributesCount: 0,
-                events: [],
+                events: [
+                  {
+                    attributes: [
+                      {
+                        key: 'exception.type',
+                        value: {
+                          stringValue: 'GraphQLError',
+                        },
+                      },
+                      {
+                        key: 'exception.message',
+                        value: {
+                          stringValue: 'Variable "$id" of required type "ID!" was not provided.',
+                        },
+                      },
+                      {
+                        key: 'exception.stacktrace',
+                        value: {
+                          stringValue:
+                            'GraphQLError: Variable "$id" of required type "ID!" was not provided.\n    at createGraphQLError (file:///node_modules/.chunk/abortSignalAny-BG8Lg0X_.mjs:29:12)\n    at coerceVariableValues (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:566:25)\n    at getVariableValues (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:533:25)\n    at buildExecutionContext (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:746:35)\n    at execute (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:615:24)\n    at file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:1960:37\n    at Promise.then (file:///node_modules/.chunk/index-DYl9M8N-.mjs:31:40)\n    at handleMaybePromise (file:///node_modules/.chunk/index-DYl9M8N-.mjs:10:33)\n    at normalizedExecutor (file:///node_modules/.chunk/normalizedExecutor-C4nYkuV1.mjs:1960:12)\n    at _4.args (file:///node_modules/.chunk/use-engine-CPlZaEw6.mjs:580:17)',
+                        },
+                      },
+                    ],
+                    name: 'exception',
+                    timeUnixNano: '1751541923667636834',
+                    droppedAttributesCount: 0,
+                  },
+                ],
                 droppedEventsCount: 0,
                 status: {
                   code: 1,
@@ -666,6 +693,15 @@ function mutate(currentTime: Date, reference: Reference) {
           const newStartTime = currentTimeB + spanOffset;
           span.startTimeUnixNano = newStartTime.toString();
           span.endTimeUnixNano = (newStartTime + spanDuration).toString();
+
+          if (span.events.length) {
+            for (const event of span.events) {
+              const spanStartTime = BigInt(event.timeUnixNano);
+              const spanOffset = spanStartTime - startTime;
+              const newStartTime = currentTimeB + spanOffset;
+              event.timeUnixNano = newStartTime.toString();
+            }
+          }
         }
       }
     }

From 35bd59e24462c647dba3c1d49ce109b27ca90fdc Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 8 Jul 2025 15:52:41 +0200
Subject: [PATCH 049/123] better like this

---
 packages/web/app/src/pages/target-trace.tsx | 41 ++++++---------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 78f4bbab52..0b0ec8a8f3 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -452,9 +452,14 @@ function SpanNode(props: SpanNodeProps) {
   );
 
   const isNearRightEdge = leftPositionPercentage + widthPercentage > 85;
+  const activeSpanId = useContext(ActiveSpanIdContext);
+  const highlightedEvent = useContext(HighlightedEventContext);
+
   const isDimmed =
-    typeof props.highlightedServiceName === 'string' &&
-    props.highlightedServiceName !== span.spanAttributes['gateway.upstream.subgraph.name'];
+    (typeof props.highlightedServiceName === 'string' &&
+      props.highlightedServiceName !== span.spanAttributes['gateway.upstream.subgraph.name']) ||
+    (activeSpanId && activeSpanId !== span.id) ||
+    (highlightedEvent && highlightedEvent.spanId !== span.id);
 
   const childrenCount = collapsed
     ? countChildren(props.span.children) + 1
@@ -464,8 +469,6 @@ function SpanNode(props: SpanNodeProps) {
   const parentColor = props.parentColor ?? props.color;
 
   const hasException = span.events.some(event => event.name === 'exception');
-  const highlightedEvent = useContext(HighlightedEventContext);
-  const activeSpanId = useContext(ActiveSpanIdContext);
 
   return (
     <>
@@ -473,9 +476,7 @@ function SpanNode(props: SpanNodeProps) {
         className={cn(
           'pr-8 odd:bg-gray-800/20 hover:bg-gray-900',
           hasException && 'bg-red-900/20 odd:bg-red-900/20 hover:bg-red-900',
-          highlightedEvent &&
-            (highlightedEvent.spanId === span.id ? 'bg-red-900 odd:bg-red-900' : 'opacity-30'),
-          activeSpanId && activeSpanId !== span.id && 'opacity-30',
+          highlightedEvent && highlightedEvent.spanId === span.id && 'bg-red-900 odd:bg-red-900',
         )}
       >
         <div className="relative flex h-8 w-full items-center overflow-hidden">
@@ -630,7 +631,7 @@ function SpanNode(props: SpanNodeProps) {
               const isError = event.name === 'exception';
 
               return (
-                <Tooltip delayDuration={100}>
+                <Tooltip delayDuration={100} key={event.id}>
                   <TooltipTrigger asChild>
                     <Link
                       className={cn(
@@ -665,7 +666,7 @@ function SpanNode(props: SpanNodeProps) {
                   </TooltipTrigger>
                   <TooltipContent
                     side="bottom"
-                    className="overflow-hidden rounded-lg border-none p-0 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
+                    className="overflow-hidden rounded-lg border-none p-1 text-xs text-gray-100 shadow-lg sm:min-w-[200px]"
                   >
                     <div className="z-20">
                       <ExceptionTeaser
@@ -1615,7 +1616,7 @@ function AttributeRow(props: AttributeRowProps) {
       </div>
       <div
         className={cn(
-          'w-full flex-1 pt-2 font-mono text-white',
+          'w-full flex-1 pt-2 font-mono text-[10px] text-white',
           !isExpanded && 'overflow-hidden text-ellipsis text-nowrap pt-0',
         )}
       >
@@ -1652,26 +1653,6 @@ export function CopyIconButton(props: CopyIconButtonProps) {
   );
 }
 
-// function ErrorEventMarker(props: { name: string; positionPercentage: string }) {
-//   const isError = props.name === 'exception';
-//   return (
-//     <Link
-//       className={cn(
-//         'absolute bottom-[4px] top-[4px] z-50 w-0.5 cursor-pointer',
-//         isError ? 'bg-red-500' : 'bg-yellow-500',
-//       )}
-//       style={{ left: props.positionPercentage }}
-//     >
-//       <div
-//         className={cn(
-//           'absolute -left-[3px] -top-[2px] h-2 w-2',
-//           isError ? 'bg-red-500' : 'bg-yellow-500',
-//         )}
-//       />
-//     </Link>
-//   );
-// }
-
 function ExceptionTeaser(props: {
   name: string;
   message: string;

From 48a89ef1da1ceafa857db24489abd596d143b250 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 11:56:18 +0200
Subject: [PATCH 050/123] fix status ok/error

---
 .../modules/operations/resolvers/Target.ts    | 25 +++++++++----------
 .../resolvers/TracesFilterOptions.ts          |  9 +++++--
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 641c5c1fdf..eecddbf143 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -108,19 +108,18 @@ export const Target: Pick<
     }
 
     if (filter?.success?.length) {
-      // ANDs.push(sql`http_status_code IN (${sql.array(filter.success.map((ok) => ok ? ).flat(1), 'String')})`);
-      ANDs.push(
-        sql`${sql.join(
-          filter.success.map(ok =>
-            ok
-              ? // 2XX
-                sql`(toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300)`
-              : // non-2XXX
-                sql`(toUInt16OrZero(http_status_code) < 200 OR toUInt16OrZero(http_status_code) >= 300)`,
-          ),
-          ' OR ',
-        )}`,
-      );
+      const hasSuccess = filter.success.includes(true);
+      const hasError = filter.success.includes(false);
+
+      if (hasSuccess && !hasError) {
+        ANDs.push(sql`"graphql_error_count" = 0`);
+        ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
+      } else if (hasError && !hasSuccess) {
+        ANDs.push(sql`"graphql_error_count" > 0`);
+        ANDs.push(
+          sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
+        );
+      }
     }
 
     if (filter?.operationNames?.length) {
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index 10945e1cb3..b82083c1ba 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -80,11 +80,16 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
       .load({
         key: 'success',
         columnExpression:
-          'if((toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300), true, false)',
+          'if((toUInt16OrZero(http_status_code) >= 200 AND toUInt16OrZero(http_status_code) < 300), true, false) AND "graphql_error_count" = 0',
         limit: null,
         arrayJoinColumn: null,
       })
-      .then(data => data.map(({ value, count }) => ({ value: value ? true : false, count })));
+      .then(data =>
+        data.map(({ value, count }) => ({
+          value: value === 'true' ? true : false,
+          count,
+        })),
+      );
   },
   errorCode: async ({ loader }, { top }) => {
     return loader.load({

From 9608e924b0a8678892edafc846d96ed18a166898 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 12:04:58 +0200
Subject: [PATCH 051/123] fix: show real amount of events

---
 packages/web/app/src/pages/target-trace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 0b0ec8a8f3..fad7e9ad42 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -861,7 +861,7 @@ export function TraceSheet(props: TraceSheetProps) {
                           variant="secondary"
                           className="rounded-md px-2 py-0.5 text-[10px] font-thin"
                         >
-                          3
+                          {events.length}
                         </Badge>
                       </div>
                     </div>

From 6df735cca8b9446ea24ae2ea60f361ba9f57c29c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 12:34:53 +0200
Subject: [PATCH 052/123] display filtered out requests in diagram

---
 packages/web/app/src/pages/target-trace.tsx  |  2 +-
 packages/web/app/src/pages/target-traces.tsx | 25 ++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index fad7e9ad42..5783d325b5 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1208,7 +1208,7 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
   return { rootSpan, spansById, events };
 }
 
-function formatNanoseconds(nsBigInt: bigint) {
+export function formatNanoseconds(nsBigInt: bigint) {
   const TEN_THOUSAND_NS = 10000n;
 
   if (nsBigInt === 0n) {
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index f411bdea34..5ff75b9271 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -40,7 +40,6 @@ import {
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FragmentType, graphql, useFragment } from '@/gql';
-import { formatDuration } from '@/lib/hooks';
 import { cn } from '@/lib/utils';
 import { Link, useRouter } from '@tanstack/react-router';
 import {
@@ -52,7 +51,11 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import * as dateMath from '../lib/date-math';
-import { CopyIconButton, TraceSheet as ImportedTraceSheet } from './target-trace';
+import {
+  CopyIconButton,
+  formatNanoseconds,
+  TraceSheet as ImportedTraceSheet,
+} from './target-trace';
 import {
   DurationFilter,
   MultiInputFilter,
@@ -69,6 +72,10 @@ const chartConfig = {
     label: 'Failed',
     color: 'hsl(var(--chart-2))',
   },
+  remaining: {
+    label: 'Remaining',
+    color: 'hsl(var(--chart-3))',
+  },
 } satisfies ChartConfig;
 
 const Traffic_TracesStatusBreakdownBucketFragment = graphql(`
@@ -88,7 +95,9 @@ type TrafficProps = {
 const Traffic = memo(function Traffic(props: TrafficProps) {
   const buckets = useFragment(Traffic_TracesStatusBreakdownBucketFragment, props.buckets);
   const data = buckets.map(b => ({
-    ...b,
+    ok: b.okCountFiltered,
+    error: b.errorCountFiltered,
+    remaining: b.okCountTotal + b.errorCountTotal - b.okCountFiltered - b.errorCountFiltered,
     timeBucket: b.timeBucket.substring(0, 10),
   }));
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
@@ -184,8 +193,9 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
             />
           }
         />
-        <Bar stackId="all" dataKey="okCountTotal" fill={`var(--color-ok)`} name="Ok" />
-        <Bar stackId="all" dataKey="errorCountTotal" fill={`var(--color-error)`} name="Error" />
+        <Bar stackId="all" dataKey="ok" fill={`var(--color-ok)`} name="Ok" />
+        <Bar stackId="all" dataKey="error" fill={`var(--color-error)`} name="Error" />
+        <Bar stackId="all" dataKey="remaining" fill="rgba(170,175,180,0.1)" name="Filtered out" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
         )}
@@ -468,7 +478,7 @@ const TracesList = memo(function TracesList(
           );
         },
         cell: ({ row }) => {
-          const duration = formatDuration((row.getValue('duration') as number) / 1000000, true);
+          const duration = formatNanoseconds(BigInt(row.getValue('duration')));
           return <div className="px-4 font-mono text-xs font-medium">{duration}</div>;
         },
       },
@@ -1132,7 +1142,7 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
           <div className="mt-2 flex items-center gap-3 text-xs">
             <div className="flex items-center gap-1">
               <Clock className="h-3 w-3 text-gray-400" />
-              <span className="text-gray-300">{formatDuration(trace.duration, true)}</span>
+              <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
             </div>
             <Badge
               variant="outline"
@@ -1167,6 +1177,7 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
       {trace && (
         <ImportedTraceSheet
           activeSpanId={null}
+          activeSpanTab={null}
           organizationSlug={props.organizationSlug}
           projectSlug={props.projectSlug}
           targetSlug={props.targetSlug}

From 3cf51075c29c8a3588350d5204842cc79050ba87 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 12:49:07 +0200
Subject: [PATCH 053/123] feat: dedicated permission for reporting otel traces

---
 packages/services/api/src/modules/auth/lib/authz.ts        | 1 +
 .../lib/organization-access-token-permissions.ts           | 7 ++++++-
 .../organization/lib/organization-member-permissions.ts    | 1 +
 packages/services/server/src/otel-auth-endpoint.ts         | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/services/api/src/modules/auth/lib/authz.ts b/packages/services/api/src/modules/auth/lib/authz.ts
index faa12454d7..f4661b8457 100644
--- a/packages/services/api/src/modules/auth/lib/authz.ts
+++ b/packages/services/api/src/modules/auth/lib/authz.ts
@@ -412,6 +412,7 @@ const permissionsByLevel = {
     z.literal('laboratory:modifyPreflightScript'),
     z.literal('schema:compose'),
     z.literal('usage:report'),
+    z.literal('traces:report'),
   ],
   service: [
     z.literal('schemaCheck:create'),
diff --git a/packages/services/api/src/modules/organization/lib/organization-access-token-permissions.ts b/packages/services/api/src/modules/organization/lib/organization-access-token-permissions.ts
index 01fb31164a..0a352e0075 100644
--- a/packages/services/api/src/modules/organization/lib/organization-access-token-permissions.ts
+++ b/packages/services/api/src/modules/organization/lib/organization-access-token-permissions.ts
@@ -98,13 +98,18 @@ export const permissionGroups: Array<PermissionGroup> = [
   },
   {
     id: 'usage-reporting',
-    title: 'Usage Reporting',
+    title: 'Usage Reporting and Tracing',
     permissions: [
       {
         id: 'usage:report',
         title: 'Report usage data',
         description: 'Grant access to report usage data.',
       },
+      {
+        id: 'traces:report',
+        title: 'Report OTEL traces',
+        description: 'Grant access to reporting traces.',
+      },
     ],
   },
   {
diff --git a/packages/services/api/src/modules/organization/lib/organization-member-permissions.ts b/packages/services/api/src/modules/organization/lib/organization-member-permissions.ts
index 318c522cda..3663909811 100644
--- a/packages/services/api/src/modules/organization/lib/organization-member-permissions.ts
+++ b/packages/services/api/src/modules/organization/lib/organization-member-permissions.ts
@@ -273,6 +273,7 @@ assertAllRulesAreAssigned([
   'appDeployment:publish',
   'appDeployment:retire',
   'usage:report',
+  'traces:report',
 ]);
 
 /**
diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
index 5c4ac16cf9..d6f29ec555 100644
--- a/packages/services/server/src/otel-auth-endpoint.ts
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -56,7 +56,7 @@ export function createOtelAuthEndpoint(args: {
 
     const canReportUsage = await session.canPerformAction({
       organizationId: target.orgId,
-      action: 'usage:report', // TODO: define a new action for tracing
+      action: 'traces:report',
       params: {
         organizationId: target.orgId,
         projectId: target.projectId,

From dca0285750612bad0135e775216390f2ef7be2fa Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 12:54:18 +0200
Subject: [PATCH 054/123] show 100%

---
 packages/web/app/src/pages/target-trace.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 5783d325b5..cd084e3504 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1142,6 +1142,7 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
     spansById.set(ufragment.id, fragmentWithChildren);
     if (ufragment.parentId == null) {
       rootSpan = fragmentWithChildren;
+      rootSpan.percentageOfTotal = '100';
     }
   }
 
@@ -1182,11 +1183,13 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
 
     parent.children.push(item);
     item.startNs = parseRFC3339ToEpochNanos(uitem.startTime) - startNS;
-    item.percentageOfTotal = (
-      (nanosecondsToMilliseconds(item.durationNs) /
-        nanosecondsToMilliseconds(rootSpan.durationNs)) *
-      100
-    ).toFixed(2);
+    if (item.percentageOfTotal == '') {
+      item.percentageOfTotal = (
+        (nanosecondsToMilliseconds(item.durationNs) /
+          nanosecondsToMilliseconds(rootSpan.durationNs)) *
+        100
+      ).toFixed(2);
+    }
     item.percentageOfParentSpan = (
       (nanosecondsToMilliseconds(item.durationNs) / nanosecondsToMilliseconds(parent.durationNs)) *
       100

From 89c1a7d6a99e4ade37db84d6155b48e47e9980e8 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 14:44:11 +0200
Subject: [PATCH 055/123] deployment configuration

---
 deployment/index.ts                       | 12 ++++++
 deployment/services/otel-collector.ts     | 52 +++++++++++++++++++++++
 deployment/services/proxy.ts              | 11 +++++
 deployment/utils/service-deployment.ts    | 15 ++++---
 docker/configs/otel-collector/config.yaml | 39 ++++++-----------
 docker/docker-compose.community.yml       | 18 ++++++++
 docker/docker-compose.dev.yml             |  5 +++
 docker/otel-collector.dockerfile          |  1 +
 8 files changed, 120 insertions(+), 33 deletions(-)
 create mode 100644 deployment/services/otel-collector.ts

diff --git a/deployment/index.ts b/deployment/index.ts
index 3e2ce66491..d487752fb6 100644
--- a/deployment/index.ts
+++ b/deployment/index.ts
@@ -14,6 +14,7 @@ import { configureGithubApp } from './services/github';
 import { deployGraphQL } from './services/graphql';
 import { deployKafka } from './services/kafka';
 import { deployObservability } from './services/observability';
+import { deployOTELCollector } from './services/otel-collector';
 import { deploySchemaPolicy } from './services/policy';
 import { deployPostgres } from './services/postgres';
 import { deployProxy } from './services/proxy';
@@ -278,6 +279,15 @@ if (hiveAppPersistedDocumentsAbsolutePath && RUN_PUBLISH_COMMANDS) {
   });
 }
 
+const otelCollector = deployOTELCollector({
+  environment,
+  graphql,
+  dbMigrations,
+  clickhouse,
+  image: docker.factory.getImageId('otel-collector', imagesTag),
+  docker,
+});
+
 const app = deployApp({
   environment,
   graphql,
@@ -306,6 +316,7 @@ const proxy = deployProxy({
   usage,
   environment,
   publicGraphQLAPIGateway,
+  otelCollector,
 });
 
 deployCloudFlareSecurityTransform({
@@ -332,4 +343,5 @@ export const schemaApiServiceId = schema.service.id;
 export const webhooksApiServiceId = webhooks.service.id;
 
 export const appId = app.deployment.id;
+export const otelCollectorId = otelCollector.deployment.id;
 export const publicIp = proxy.get()!.status.loadBalancer.ingress[0].ip;
diff --git a/deployment/services/otel-collector.ts b/deployment/services/otel-collector.ts
new file mode 100644
index 0000000000..7318df2c25
--- /dev/null
+++ b/deployment/services/otel-collector.ts
@@ -0,0 +1,52 @@
+import { serviceLocalEndpoint } from '../utils/local-endpoint';
+import { ServiceDeployment } from '../utils/service-deployment';
+import { Clickhouse } from './clickhouse';
+import { DbMigrations } from './db-migrations';
+import { Docker } from './docker';
+import { Environment } from './environment';
+import { GraphQL } from './graphql';
+
+export type OTELCollector = ReturnType<typeof deployOTELCollector>;
+
+export function deployOTELCollector(args: {
+  image: string;
+  environment: Environment;
+  docker: Docker;
+  clickhouse: Clickhouse;
+  dbMigrations: DbMigrations;
+  graphql: GraphQL;
+}) {
+  return new ServiceDeployment(
+    'otel-collector',
+    {
+      image: args.image,
+      imagePullSecret: args.docker.secret,
+      env: {
+        ...args.environment.envVars,
+        HIVE_OTEL_AUTH_ENDPOINT: serviceLocalEndpoint(args.graphql.service).apply(
+          value => value + '/otel-auth',
+        ),
+        CLICKHOUSE_PROTOCOL: 'tcp',
+      },
+      /**
+       * We are using the healthcheck extension.
+       * https://github.com/open-telemetry/opentelemetry-collector-contrib/tree/main/extension/healthcheckextension
+       */
+      probePort: 13133,
+      readinessProbe: '/',
+      livenessProbe: '/',
+      startupProbe: '/',
+      exposesMetrics: true,
+      replicas: args.environment.isProduction ? 3 : 1,
+      pdb: true,
+      availabilityOnEveryNode: true,
+      port: 4318,
+    },
+    [args.clickhouse.deployment, args.clickhouse.service, args.dbMigrations],
+  )
+    .withSecret('CLICKHOUSE_HOST', args.clickhouse.secret, 'host')
+    .withSecret('CLICKHOUSE_PORT', args.clickhouse.secret, 'port')
+    .withSecret('CLICKHOUSE_USERNAME', args.clickhouse.secret, 'username')
+    .withSecret('CLICKHOUSE_PASSWORD', args.clickhouse.secret, 'password')
+    .deploy();
+}
diff --git a/deployment/services/proxy.ts b/deployment/services/proxy.ts
index dba4c131a7..07037456b7 100644
--- a/deployment/services/proxy.ts
+++ b/deployment/services/proxy.ts
@@ -5,6 +5,7 @@ import { App } from './app';
 import { Environment } from './environment';
 import { GraphQL } from './graphql';
 import { Observability } from './observability';
+import { OTELCollector } from './otel-collector';
 import { type PublicGraphQLAPIGateway } from './public-graphql-api-gateway';
 import { Usage } from './usage';
 
@@ -15,6 +16,7 @@ export function deployProxy({
   environment,
   observability,
   publicGraphQLAPIGateway,
+  otelCollector,
 }: {
   observability: Observability;
   environment: Environment;
@@ -22,6 +24,7 @@ export function deployProxy({
   app: App;
   usage: Usage;
   publicGraphQLAPIGateway: PublicGraphQLAPIGateway;
+  otelCollector: OTELCollector;
 }) {
   const { tlsIssueName } = new CertManager().deployCertManagerAndIssuer();
   const commonConfig = new pulumi.Config('common');
@@ -113,5 +116,13 @@ export function deployProxy({
         requestTimeout: '60s',
         retriable: true,
       },
+      {
+        name: 'otel-traces',
+        path: '/otel/v1/traces',
+        customRewrite: '/v1/traces',
+        service: otelCollector.service,
+        requestTimeout: '60s',
+        retriable: true,
+      },
     ]);
 }
diff --git a/deployment/utils/service-deployment.ts b/deployment/utils/service-deployment.ts
index 9bc9aa8f89..53f4197810 100644
--- a/deployment/utils/service-deployment.ts
+++ b/deployment/utils/service-deployment.ts
@@ -40,6 +40,8 @@ export class ServiceDeployment {
       args?: kx.types.Container['args'];
       image: string;
       port?: number;
+      /** Port to use for liveness, startup and readiness probes. */
+      probePort?: number;
       serviceAccountName?: pulumi.Output<string>;
       livenessProbe?: string | ProbeConfig;
       readinessProbe?: string | ProbeConfig;
@@ -107,6 +109,7 @@ export class ServiceDeployment {
 
   createPod(asJob: boolean) {
     const port = this.options.port || 3000;
+    const probePort = this.options.probePort ?? port;
     const additionalEnv: any[] = normalizeEnv(this.options.env);
     const secretsEnv: any[] = normalizeEnvSecrets(this.envSecrets);
 
@@ -125,14 +128,14 @@ export class ServiceDeployment {
               timeoutSeconds: 5,
               httpGet: {
                 path: this.options.livenessProbe,
-                port,
+                port: probePort,
               },
             }
           : {
               ...this.options.livenessProbe,
               httpGet: {
                 path: this.options.livenessProbe.endpoint,
-                port,
+                port: probePort,
               },
             };
     }
@@ -147,14 +150,14 @@ export class ServiceDeployment {
               timeoutSeconds: 5,
               httpGet: {
                 path: this.options.readinessProbe,
-                port,
+                port: probePort,
               },
             }
           : {
               ...this.options.readinessProbe,
               httpGet: {
                 path: this.options.readinessProbe.endpoint,
-                port,
+                port: probePort,
               },
             };
     }
@@ -169,14 +172,14 @@ export class ServiceDeployment {
               timeoutSeconds: 10,
               httpGet: {
                 path: this.options.startupProbe,
-                port,
+                port: probePort,
               },
             }
           : {
               ...this.options.startupProbe,
               httpGet: {
                 path: this.options.startupProbe.endpoint,
-                port,
+                port: probePort,
               },
             };
     }
diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index f0aac31c62..349d17450b 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -1,6 +1,8 @@
 extensions:
   hiveauth:
     endpoint: ${HIVE_OTEL_AUTH_ENDPOINT}
+  health_check:
+    endpoint: '0.0.0.0:13133'
 receivers:
   otlp:
     protocols:
@@ -26,35 +28,17 @@ processors:
       - key: hive.target_id
         from_context: auth.targetId
         action: insert
-  # filter/drop_missing_attributes:
-  #   error_mode: ignore
-  #   traces:
-  #     span:
-  #       # prettier-ignore
-  #       - not (
-  #           attributes["http.status"] != nil and
-  #           attributes["http.host"] != nil and
-  #           attributes["http.method"] != nil and
-  #           attributes["http.route"] != nil and
-  #           attributes["http.url"] != nil and
-  #           attributes["hive.graphql.operation.document"] != nil and
-  #           (
-  #             attributes["hive.graphql.operation.type"] == "query" or
-  #             attributes["hive.graphql.operation.type"] == "mutation" or
-  #             attributes["hive.graphql.operation.type"] == "subscription"
-  #           )
-  #         )
 exporters:
   debug:
     verbosity: detailed
     sampling_initial: 5
     sampling_thereafter: 200
   clickhouse:
-    endpoint: tcp://clickhouse:9000?dial_timeout=10s&compress=lz4
+    endpoint: ${CLICKHOUSE_PROTOCOL}://${CLICKHOUSE_HOST}:${CLICKHOUSE_PORT}?dial_timeout=10s&compress=lz4
     database: default
     async_insert: true
-    username: test
-    password: test
+    username: ${CLICKHOUSE_USERNAME}
+    password: ${CLICKHOUSE_PASSWORD}
     create_schema: false
     ttl: 720h
     compress: lz4
@@ -70,6 +54,7 @@ exporters:
 service:
   extensions:
     - hiveauth
+    - health_check
   telemetry:
     logs:
       level: INFO
@@ -79,9 +64,9 @@ service:
   pipelines:
     traces:
       receivers: [otlp]
-      processors: [
-          attributes,
-          # filter/drop_missing_attributes,
-          batch,
-        ]
-      exporters: [clickhouse, debug]
+      processors:
+        - attributes
+        - batch
+      exporters:
+        - clickhouse
+        - debug
diff --git a/docker/docker-compose.community.yml b/docker/docker-compose.community.yml
index 5545083aed..69b1fd1abd 100644
--- a/docker/docker-compose.community.yml
+++ b/docker/docker-compose.community.yml
@@ -422,3 +422,21 @@ services:
       LOG_LEVEL: '${LOG_LEVEL:-debug}'
       SENTRY: '${SENTRY:-0}'
       SENTRY_DSN: '${SENTRY_DSN:-}'
+
+  otel-collector:
+    depends_on:
+      clickhouse:
+        condition: service_healthy
+    image: '${DOCKER_REGISTRY}otel-collector${DOCKER_TAG}'
+    environment:
+      HIVE_OTEL_AUTH_ENDPOINT: 'http://server:3001/otel-auth'
+      CLICKHOUSE_PROTOCOL: tcp
+      CLICKHOUSE_HOST: clickhouse
+      CLICKHOUSE_PORT: '8123'
+      CLICKHOUSE_USERNAME: '${CLICKHOUSE_USER}'
+      CLICKHOUSE_PASSWORD: '${CLICKHOUSE_PASSWORD}'
+    ports:
+      - '4317:4317'
+      - '4318:4318'
+    networks:
+      - 'stack'
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index f634768d5e..bbd95cfd6d 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -186,6 +186,11 @@ services:
       dockerfile: ./../../otel-collector.dockerfile
     environment:
       HIVE_OTEL_AUTH_ENDPOINT: 'http://host.docker.internal:3001/otel-auth'
+      CLICKHOUSE_PROTOCOL: tcp
+      CLICKHOUSE_HOST: clickhouse
+      CLICKHOUSE_PORT: 8123
+      CLICKHOUSE_USERNAME: test
+      CLICKHOUSE_PASSWORD: test
     volumes:
       - ./configs/otel-collector/builder-config.yaml:/builder-config.yaml
       - ./configs/otel-collector/config.yaml:/etc/otel-config.yaml
diff --git a/docker/otel-collector.dockerfile b/docker/otel-collector.dockerfile
index 5df59e115e..5caf2d8dbe 100644
--- a/docker/otel-collector.dockerfile
+++ b/docker/otel-collector.dockerfile
@@ -23,6 +23,7 @@ WORKDIR /app
 
 # Copy the generated collector binary from the builder stage
 COPY --from=builder /build/otelcol-custom .
+COPY config.yaml /etc/otel-config.yaml
 
 # Expose necessary ports
 EXPOSE 4317/tcp 4318/tcp 13133/tcp

From 1cdd2b0dfaa27c999342b0454c54a9a685bb1a82 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 15:25:44 +0200
Subject: [PATCH 056/123] fix types

---
 packages/web/app/src/pages/target-traces.tsx | 228 +------------------
 packages/web/app/src/router.tsx              |  19 +-
 2 files changed, 23 insertions(+), 224 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 5ff75b9271..9646702e5e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -233,7 +233,7 @@ export const TargetTracesPagination = {
   shape: TargetTracesPaginationShape,
 };
 
-type PaginationState = z.infer<typeof TargetTracesPaginationShape>;
+export type PaginationState = z.infer<typeof TargetTracesPaginationShape>;
 type PaginationProps = {
   pagination: PaginationState;
 };
@@ -695,228 +695,18 @@ type FilterProps = {
 
 type FilterKeys = keyof FilterState;
 
-const filterOptions = {
-  'graphql.status': [
-    {
-      value: 'ok',
-      searchContent: 'ok',
-      label: <LabelWithColor className="bg-green-600">Ok</LabelWithColor>,
-      count: 12_500_000,
-    },
-    {
-      value: 'error',
-      searchContent: 'error',
-      label: <LabelWithColor className="bg-red-600">Error</LabelWithColor>,
-      count: 13_123,
-    },
-  ],
-  'graphql.kind': [
-    {
-      value: 'query',
-      searchContent: 'query',
-      label: 'Query',
-      count: 12_500_000,
-    },
-    {
-      value: 'mutation',
-      searchContent: 'mutation',
-      label: 'Mutation',
-      count: 3_200_000,
-    },
-    {
-      value: 'subscription',
-      searchContent: 'subscription',
-      label: 'Subscription',
-      count: 123_123,
-    },
-  ],
-  'graphql.subgraph': [
-    {
-      value: 'link',
-      searchContent: 'link',
-      label: 'link',
-      count: 530_000,
-    },
-    {
-      value: 'products',
-      searchContent: 'products',
-      label: 'products',
-      count: 612_000,
-    },
-    {
-      value: 'prices',
-      searchContent: 'prices',
-      label: 'prices',
-      count: 610_000,
-    },
-  ],
-  'graphql.name': [
-    {
-      value: '3h1s',
-      searchContent: '3h1s fetchproducts',
-      label: <LabelWithBadge badgeText="3h1s">FetchProducts</LabelWithBadge>,
-      count: 368_000,
-    },
-    {
-      value: '7na1',
-      searchContent: '7na1 fetchUsers',
-      label: <LabelWithBadge badgeText="7na1">FetchUsers</LabelWithBadge>,
-      count: 123_000,
-    },
-    {
-      value: '64a1',
-      searchContent: '64a1 FetchProducts',
-      label: <LabelWithBadge badgeText="64a1">FetchProducts</LabelWithBadge>,
-      count: 1_000,
-    },
-  ],
-  'graphql.client': [
-    {
-      value: 'unknown',
-      searchContent: 'unknown',
-      label: 'unknown',
-      count: 43_123,
-    },
-    {
-      value: 'hive-app',
-      searchContent: 'hive-app',
-      label: 'hive-app',
-      count: 720_000,
-    },
-    {
-      value: 'Hive CLI',
-      searchContent: 'Hive CLI',
-      label: 'Hive CLI',
-      count: 340_000,
-    },
-    {
-      value: 'Hive Client',
-      searchContent: 'Hive Client',
-      label: 'Hive Client',
-      count: 87_123,
-    },
-    {
-      value: 'Hive CLI@0.46.0',
-      searchContent: 'Hive CLI@0.46.0',
-      label: (
-        <LabelWithBadge side="right" badgeText="0.46.0">
-          Hive CLI
-        </LabelWithBadge>
-      ),
-      count: 1_000,
-    },
-    {
-      value: 'Hive Client@0.25.3',
-      searchContent: 'Hive Client@0.25.3',
-      label: (
-        <LabelWithBadge side="right" badgeText="0.25.3">
-          Hive Client
-        </LabelWithBadge>
-      ),
-      count: 6_120,
-    },
-  ],
-  'http.status': [
-    {
-      value: '200',
-      searchContent: '200',
-      label: '200',
-      count: 9_123_000,
-    },
-    {
-      value: '400',
-      searchContent: '400',
-      label: '400',
-      count: 100_000,
-    },
-    {
-      value: '500',
-      searchContent: '500',
-      label: '500',
-      count: 52_400,
-    },
-  ],
-  'http.method': [
-    {
-      value: 'GET',
-      searchContent: 'get',
-      label: 'GET',
-      count: 1230,
-    },
-    {
-      value: 'POST',
-      searchContent: 'post',
-      label: 'POST',
-      count: 12_000_000,
-    },
-  ],
-  'http.host': [
-    {
-      value: 'localhost:4000',
-      searchContent: 'localhost:4000',
-      label: 'localhost:4000',
-      count: 12_000_000,
-    },
-    {
-      value: 'localhost:4200',
-      searchContent: 'localhost:4200',
-      label: 'localhost:4200',
-      count: 7_540_123,
-    },
-    {
-      value: 'localhost:3000',
-      searchContent: 'localhost:3000',
-      label: 'localhost:3000',
-      count: 2_320_123,
-    },
-  ],
-  'http.route': [
-    {
-      value: '/graphql',
-      searchContent: '/graphql',
-      label: '/graphql',
-      count: 12_000_000,
-    },
-    {
-      value: '/',
-      searchContent: '/',
-      label: '/',
-      count: 7_540_123,
-    },
-  ],
-  'http.url': [
-    {
-      value: 'http://localhost:3000/',
-      searchContent: 'http://localhost:3000/',
-      label: 'http://localhost:3000/',
-      count: 12_000_000,
-    },
-    {
-      value: 'http://localhost:4000/graphql',
-      searchContent: 'http://localhost:4000/graphql',
-      label: 'http://localhost:4000/graphql',
-      count: 7_540_123,
-    },
-    {
-      value: 'http://localhost:4200/graphql',
-      searchContent: 'http://localhost:4200/graphql',
-      label: 'http://localhost:4200/graphql',
-      count: 2_320_123,
-    },
-  ],
-  'graphql.errorCode': [
-    {
-      value: 'ERR_AAA',
-      searchContent: 'ERR_AAA',
-      label: 'ERR_AAA',
-      count: 12_000_000,
-    },
-  ],
+type FilterOptions = {
+  [key: string]: Array<{
+    value: string;
+    searchContent: string;
+    label: ReactNode;
+    count: number;
+  }>;
 };
 
 function Filters(
   props: FilterProps & {
-    options: typeof filterOptions;
+    options: FilterOptions;
   },
 ) {
   const filters = props.filter;
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 496bb58b61..c56a09f373 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -80,6 +80,7 @@ import { TargetLaboratoryPage } from './pages/target-laboratory';
 import { TargetSettingsPage, TargetSettingsPageEnum } from './pages/target-settings';
 import { TargetTracePage } from './pages/target-trace';
 import {
+  PaginationState,
   TargetTracesFilterState,
   TargetTracesPage,
   TargetTracesPagination,
@@ -658,17 +659,25 @@ const targetInsightsRoute = createRoute({
 });
 
 const TargetTracesRouteSearch = z.object({
-  filter: TargetTracesFilterState.optional().default({}),
-  sort: TargetTracesSort.shape.optional().default([]),
-  pagination: TargetTracesPagination.shape.optional().default({}),
+  filter: TargetTracesFilterState.optional(),
+  sort: TargetTracesSort.shape.optional(),
+  pagination: TargetTracesPagination.shape.optional(),
 });
+
 const targetTracesRoute = createRoute({
   getParentRoute: () => targetRoute,
   path: 'traces',
   validateSearch: TargetTracesRouteSearch.parse,
   component: function TargetTracesRoute() {
     const { organizationSlug, projectSlug, targetSlug } = targetTracesRoute.useParams();
-    const { filter, sort, pagination } = targetTracesRoute.useSearch();
+    const {
+      filter = {},
+      sort = [],
+      pagination = {
+        pageIndex: 0,
+        pageSize: 20,
+      } satisfies PaginationState,
+    } = targetTracesRoute.useSearch();
 
     return (
       <TargetTracesPage
@@ -677,7 +686,7 @@ const targetTracesRoute = createRoute({
         targetSlug={targetSlug}
         sorting={sort}
         pagination={pagination}
-        filter={filter}
+        filter={filter as any}
       />
     );
   },

From 05244e97520e4177439acbb28670e6597cef6648 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 15:37:52 +0200
Subject: [PATCH 057/123] feature flag for otel traces

---
 .../providers/organization-access-tokens.ts        | 11 ++++++++++-
 .../modules/organization/resolvers/Organization.ts | 14 ++++++++++++--
 packages/services/api/src/shared/entities.ts       |  1 +
 packages/services/storage/src/index.ts             |  3 +++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/services/api/src/modules/organization/providers/organization-access-tokens.ts b/packages/services/api/src/modules/organization/providers/organization-access-tokens.ts
index 9436b8ad86..af35060a8a 100644
--- a/packages/services/api/src/modules/organization/providers/organization-access-tokens.ts
+++ b/packages/services/api/src/modules/organization/providers/organization-access-tokens.ts
@@ -18,6 +18,7 @@ import {
 import { IdTranslator } from '../../shared/providers/id-translator';
 import { Logger } from '../../shared/providers/logger';
 import { PG_POOL_CONFIG } from '../../shared/providers/pg-pool';
+import { Storage } from '../../shared/providers/storage';
 import * as OrganizationAccessKey from '../lib/organization-access-key';
 import { assignablePermissions } from '../lib/organization-access-token-permissions';
 import { ResourceAssignmentModel } from '../lib/resource-assignment-model';
@@ -92,6 +93,7 @@ export class OrganizationAccessTokens {
     private idTranslator: IdTranslator,
     private session: Session,
     private auditLogs: AuditLogRecorder,
+    private storage: Storage,
     logger: Logger,
   ) {
     this.logger = logger.child({
@@ -140,9 +142,16 @@ export class OrganizationAccessTokens {
         args.assignedResources ?? { mode: 'GRANULAR' },
       );
 
+    const organization = await this.storage.getOrganization({ organizationId });
+
     const permissions = Array.from(
       new Set(
-        args.permissions.filter(permission => assignablePermissions.has(permission as Permission)),
+        args.permissions.filter(
+          permission =>
+            assignablePermissions.has(permission as Permission) &&
+            // can only assign traces report permission if otel tracing feature flag is enabled in organization
+            (permission === 'traces:report' ? organization.featureFlags.otelTracing : true),
+        ),
       ),
     );
 
diff --git a/packages/services/api/src/modules/organization/resolvers/Organization.ts b/packages/services/api/src/modules/organization/resolvers/Organization.ts
index 96c1395a1f..b44febcf46 100644
--- a/packages/services/api/src/modules/organization/resolvers/Organization.ts
+++ b/packages/services/api/src/modules/organization/resolvers/Organization.ts
@@ -205,12 +205,22 @@ export const Organization: Pick<
     return OrganizationMemberPermissions.permissionGroups;
   },
   availableOrganizationAccessTokenPermissionGroups: async (organization, _, { injector }) => {
-    const permissionGroups = OrganizationAccessTokensPermissions.permissionGroups;
+    let permissionGroups = OrganizationAccessTokensPermissions.permissionGroups;
+
     const isAppDeploymentsEnabled =
       injector.get<boolean>(APP_DEPLOYMENTS_ENABLED) || organization.featureFlags.appDeployments;
+
     if (!isAppDeploymentsEnabled) {
-      return permissionGroups.filter(p => p.id !== 'app-deployments');
+      permissionGroups = permissionGroups.filter(p => p.id !== 'app-deployments');
     }
+
+    if (!organization.featureFlags.otelTracing) {
+      permissionGroups = permissionGroups.map(group => ({
+        ...group,
+        permissions: group.permissions.filter(p => p.id !== 'traces:report'),
+      }));
+    }
+
     return permissionGroups;
   },
   accessTokens: async (organization, args, { injector }) => {
diff --git a/packages/services/api/src/shared/entities.ts b/packages/services/api/src/shared/entities.ts
index 12117b15fe..4acd090417 100644
--- a/packages/services/api/src/shared/entities.ts
+++ b/packages/services/api/src/shared/entities.ts
@@ -190,6 +190,7 @@ export interface Organization {
      */
     forceLegacyCompositionInTargets: string[];
     appDeployments: boolean;
+    otelTracing: boolean;
   };
   zendeskId: string | null;
   /** ID of the user that owns the organization */
diff --git a/packages/services/storage/src/index.ts b/packages/services/storage/src/index.ts
index 9e580b2d98..e859280676 100644
--- a/packages/services/storage/src/index.ts
+++ b/packages/services/storage/src/index.ts
@@ -4737,6 +4737,8 @@ const FeatureFlagsModel = zod
     forceLegacyCompositionInTargets: zod.array(zod.string()).default([]),
     /** whether app deployments are enabled for the given organization */
     appDeployments: zod.boolean().default(false),
+    /** whether otel tracing is enabled for the given organization */
+    otelTracing: zod.boolean().default(false),
   })
   .optional()
   .nullable()
@@ -4747,6 +4749,7 @@ const FeatureFlagsModel = zod
         compareToPreviousComposableVersion: false,
         forceLegacyCompositionInTargets: [],
         appDeployments: false,
+        otelTracing: false,
       },
   );
 

From a3bfdc9851c9418fa928828d68e82d64654d920d Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 15:39:30 +0200
Subject: [PATCH 058/123] fix types

---
 .../services/api/src/modules/operations/providers/traces.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 77a31040c6..dab07cb968 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -441,8 +441,8 @@ function getBucketUnitAndCount(startDate: Date, endDate: Date): BucketResult {
   const diffMs = endDate.getTime() - startDate.getTime();
   const diffMinutes = diffMs / MS_IN.minute;
 
-  let unit;
-  let count;
+  let unit: BucketResult['unit'];
+  let count: BucketResult['count'];
 
   if (diffMinutes <= 60) {
     unit = 'minutes';

From b2bb421f5cbe943214e7d968977cffdf53ab461b Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 16:27:29 +0200
Subject: [PATCH 059/123] fix a bunch of linting issues

---
 .../modules/operations/providers/traces.ts    | 12 +--
 .../src/modules/operations/resolvers/Span.ts  |  1 -
 .../modules/operations/resolvers/Target.ts    |  8 +-
 .../resolvers/TracesFilterOptions.ts          |  4 +-
 .../modules/shared/resolvers/DateTime64.ts    |  7 +-
 packages/web/app/src/components/ui/chart.tsx  | 10 +--
 .../web/app/src/components/ui/resizable.tsx   |  4 +-
 .../web/app/src/components/ui/sidebar.tsx     | 14 ++--
 packages/web/app/src/lib/date-math.ts         |  4 +-
 packages/web/app/src/pages/target-trace.tsx   | 73 +++++++++----------
 packages/web/app/src/pages/target-traces.tsx  | 62 +++++++++-------
 .../src/pages/traces/target-traces-filter.tsx | 41 +++++------
 packages/web/app/src/router.tsx               |  1 -
 packages/web/app/tailwind.config.ts           |  4 +-
 14 files changed, 121 insertions(+), 124 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index dab07cb968..a97f318f83 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -1,8 +1,8 @@
 import { Injectable } from 'graphql-modules';
 import { z } from 'zod';
 import { subDays } from '@/lib/date-time';
-import { batch, parseDateRangeInput } from '@hive/api/shared/helpers';
 import * as GraphQLSchema from '../../../__generated__/types';
+import { batch, parseDateRangeInput } from '../../../shared/helpers';
 import { Logger } from '../../shared/providers/logger';
 import { ClickHouse, sql } from './clickhouse-client';
 import { formatDate } from './operations-reader';
@@ -293,8 +293,6 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false)
     const period = parseDateRangeInput(filter.period);
     ANDs.push(
       sql`"otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(period.from)}, 'UTC')`,
-    );
-    ANDs.push(
       sql`"otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(period.to)}, 'UTC')`,
     );
   }
@@ -317,11 +315,13 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false)
     const hasError = filter.success.includes(false);
 
     if (hasSuccess && !hasError) {
-      ANDs.push(sql`"graphql_error_count" = 0`);
-      ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
+      ANDs.push(
+        sql`"graphql_error_count" = 0`,
+        sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`,
+      );
     } else if (hasError && !hasSuccess) {
-      ANDs.push(sql`"graphql_error_count" > 0`);
       ANDs.push(
+        sql`"graphql_error_count" > 0`,
         sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
       );
     }
diff --git a/packages/services/api/src/modules/operations/resolvers/Span.ts b/packages/services/api/src/modules/operations/resolvers/Span.ts
index 22286473a7..0c4a4f6dcc 100644
--- a/packages/services/api/src/modules/operations/resolvers/Span.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Span.ts
@@ -1,4 +1,3 @@
-import { addMilliseconds } from 'date-fns';
 import type { SpanResolvers } from './../../../__generated__/types';
 
 /*
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index eecddbf143..78926d8b41 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -112,11 +112,13 @@ export const Target: Pick<
       const hasError = filter.success.includes(false);
 
       if (hasSuccess && !hasError) {
-        ANDs.push(sql`"graphql_error_count" = 0`);
-        ANDs.push(sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`);
+        ANDs.push(
+          sql`"graphql_error_count" = 0`,
+          sql`substring("http_status_code", 1, 1) IN (${sql.array(['2', '3'], 'String')})`,
+        );
       } else if (hasError && !hasSuccess) {
-        ANDs.push(sql`"graphql_error_count" > 0`);
         ANDs.push(
+          sql`"graphql_error_count" > 0`,
           sql`substring("http_status_code", 1, 1) NOT IN (${sql.array(['2', '3'], 'String')})`,
         );
       }
diff --git a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
index b82083c1ba..e2b08909c1 100644
--- a/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
+++ b/packages/services/api/src/modules/operations/resolvers/TracesFilterOptions.ts
@@ -19,7 +19,7 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
       arrayJoinColumn: null,
     });
   },
-  httpMethod: async ({ loader }, { top }, { injector }) => {
+  httpMethod: async ({ loader }, { top }) => {
     return loader.load({
       key: 'http_method',
       columnExpression: 'http_method',
@@ -27,7 +27,7 @@ export const TracesFilterOptions: TracesFilterOptionsResolvers = {
       arrayJoinColumn: null,
     });
   },
-  httpRoute: async ({ loader }, { top }, { injector }) => {
+  httpRoute: async ({ loader }, { top }) => {
     return loader.load({
       key: 'http_route',
       columnExpression: 'http_route',
diff --git a/packages/services/api/src/modules/shared/resolvers/DateTime64.ts b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
index 48cde0ca0f..05e27a2c97 100644
--- a/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
+++ b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
@@ -26,9 +26,7 @@ const validateDate = (datestring: string): boolean => {
 
   switch (month) {
     case 2: // February
-      if (leapYear(year) && day > 29) {
-        return false;
-      } else if (!leapYear(year) && day > 28) {
+      if ((leapYear(year) && day > 29) || (!leapYear(year) && day > 28)) {
         return false;
       }
       return true;
@@ -57,7 +55,6 @@ const validateDateTime = (dateTimeString: string): boolean => {
   // Check if it is a correct date using the javascript Date parse() method.
   const time = Date.parse(dateTimeString);
   if (time !== time) {
-    // eslint-disable-line
     return false;
   }
   // Split the date-time-string up into the string-date and time-string part.
@@ -77,7 +74,7 @@ const validateTime = (time: string): boolean => {
 
 const validateJSDate = (date: Date): boolean => {
   const time = date.getTime();
-  return time === time; // eslint-disable-line
+  return time === time;
 };
 
 const parseDateTime = (dateTime: string) => dateTime;
diff --git a/packages/web/app/src/components/ui/chart.tsx b/packages/web/app/src/components/ui/chart.tsx
index e11d102365..a4457ac829 100644
--- a/packages/web/app/src/components/ui/chart.tsx
+++ b/packages/web/app/src/components/ui/chart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import * as React from 'react';
+import React from 'react';
 import * as RechartsPrimitive from 'recharts';
 import { cn } from '@/lib/utils';
 
@@ -175,7 +175,7 @@ const ChartTooltipContent = React.forwardRef<
               <div
                 key={item.dataKey}
                 className={cn(
-                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5',
                   indicator === 'dot' && 'items-center',
                 )}
               >
@@ -269,15 +269,13 @@ const ChartLegendContent = React.forwardRef<
         return (
           <div
             key={item.value}
-            className={cn(
-              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
-            )}
+            className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:size-3')}
           >
             {itemConfig?.icon && !hideIcon ? (
               <itemConfig.icon />
             ) : (
               <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
+                className="size-2 shrink-0 rounded-[2px]"
                 style={{
                   backgroundColor: item.color,
                 }}
diff --git a/packages/web/app/src/components/ui/resizable.tsx b/packages/web/app/src/components/ui/resizable.tsx
index 859532c626..3f75506037 100644
--- a/packages/web/app/src/components/ui/resizable.tsx
+++ b/packages/web/app/src/components/ui/resizable.tsx
@@ -7,7 +7,7 @@ const ResizablePanelGroup = ({
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
   <ResizablePrimitive.PanelGroup
-    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    className={cn('flex size-full data-[panel-group-direction=vertical]:flex-col', className)}
     {...props}
   />
 );
@@ -30,7 +30,7 @@ const ResizableHandle = ({
   >
     {withHandle && (
       <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
-        <GripVertical className="h-2.5 w-2.5" />
+        <GripVertical className="size-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
diff --git a/packages/web/app/src/components/ui/sidebar.tsx b/packages/web/app/src/components/ui/sidebar.tsx
index 61ff277ffe..996f92292c 100644
--- a/packages/web/app/src/components/ui/sidebar.tsx
+++ b/packages/web/app/src/components/ui/sidebar.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { cva, VariantProps } from 'class-variance-authority';
 import { PanelLeft } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -63,15 +63,15 @@ const SidebarProvider = React.forwardRef<
 
     // This is the internal state of the sidebar.
     // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen);
-    const open = openProp ?? _open;
+    const [internalIsOpen, setInternalIsOpen] = React.useState(defaultOpen);
+    const open = openProp ?? internalIsOpen;
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const openState = typeof value === 'function' ? value(open) : value;
         if (setOpenProp) {
           setOpenProp(openState);
         } else {
-          _setOpen(openState);
+          setInternalIsOpen(openState);
         }
 
         // This sets the cookie to keep the sidebar state.
@@ -192,7 +192,7 @@ const Sidebar = React.forwardRef<
             }
             side={side}
           >
-            <div className="flex h-full w-full flex-col">{children}</div>
+            <div className="flex size-full flex-col">{children}</div>
           </SheetContent>
         </Sheet>
       );
@@ -234,7 +234,7 @@ const Sidebar = React.forwardRef<
         >
           <div
             data-sidebar="sidebar"
-            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
           >
             {children}
           </div>
@@ -257,7 +257,7 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn('h-7 w-7', className)}
+      className={cn('size-7', className)}
       onClick={event => {
         onClick?.(event);
         toggleSidebar();
diff --git a/packages/web/app/src/lib/date-math.ts b/packages/web/app/src/lib/date-math.ts
index 36dda8ae0a..0862ac659e 100644
--- a/packages/web/app/src/lib/date-math.ts
+++ b/packages/web/app/src/lib/date-math.ts
@@ -62,14 +62,14 @@ export function parse(text: string, now = new UTCDate()): Date | undefined {
     // yyyy-MM-dd
     const date = parseDateString(text);
 
-    if (date && !isNaN(date?.getTime())) {
+    if (date && !Number.isNaN(date?.getTime())) {
       return date;
     }
 
     // ISO
     const isoDate = parseISO(text);
 
-    if (isoDate && !isNaN(isoDate?.getTime())) {
+    if (isoDate && !Number.isNaN(isoDate?.getTime())) {
       return isoDate;
     }
   }
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index cd084e3504..e9e457100f 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -75,7 +75,7 @@ function TraceView(props: {
             </div>
           </div>
           <div className="h-12 grow pr-8">
-            <div className="relative h-full w-full">
+            <div className="relative size-full">
               <div className="absolute left-0 top-6 -translate-x-1/2 text-center">
                 {formatMsTimestamp(timestamps[0])}
               </div>
@@ -100,7 +100,7 @@ function TraceView(props: {
           </div>
         </div>
       </div>
-      <ScrollArea className="flex-grow">
+      <ScrollArea className="grow">
         <div>
           <TraceTree
             leftPanelWidth={width}
@@ -188,7 +188,7 @@ function TreeIcon(props: {
 
       {/* leaf span */}
       {props.isLeaf ? (
-        <circle cx={props.level * 16 + 12} cy="16" r="3" fill="currentColor"></circle>
+        <circle cx={props.level * 16 + 12} cy="16" r="3" fill="currentColor" />
       ) : (
         // number block
         <>
@@ -235,7 +235,7 @@ function TabButton(props: { isActive: boolean; onClick(): void; children: ReactN
   return (
     <button
       className={cn(
-        'border-b-2 px-2 py-2',
+        'border-b-2 p-2',
         props.isActive ? 'border-[#2662d8]' : 'hover:border-border border-transparent',
       )}
       onClick={props.onClick}
@@ -321,7 +321,7 @@ function TraceResize(props: { minWidth: number; maxWidth: number }) {
 
   return (
     <div
-      className="absolute bottom-0 top-0 z-20 w-[5px] cursor-ew-resize"
+      className="absolute inset-y-0 z-20 w-[5px] cursor-ew-resize"
       style={{ left: width - 2 }} // Position 2px to the left of the center
       ref={handleRef}
       onPointerDown={handlePointerDown}
@@ -426,7 +426,7 @@ function NodeElement(props: NodeElementProps) {
         className="absolute top-1/2 flex -translate-y-1/2 items-center whitespace-nowrap px-[4px] font-mono leading-none"
         style={{
           fontSize: '11px',
-          ...(props.isNearRightEdge ? { right: '6px' } : { left: `calc(100% + 6px)` }),
+          ...(props.isNearRightEdge ? { right: '6px' } : { left: 'calc(100% + 6px)' }),
         }}
       >
         {props.durationStr}
@@ -486,7 +486,7 @@ function SpanNode(props: SpanNodeProps) {
           >
             <div
               className={cn(
-                'flex h-8 shrink-0 items-center overflow-hidden overflow-ellipsis whitespace-nowrap text-gray-500',
+                'flex h-8 shrink-0 items-center truncate text-gray-500',
                 canBeCollapsed && 'cursor-pointer',
               )}
             >
@@ -512,19 +512,14 @@ function SpanNode(props: SpanNodeProps) {
               {hasException && (
                 <Badge
                   variant="outline"
-                  className="font-small ml-auto mr-1 rounded-sm border-0 bg-red-900/30 px-1 font-mono text-xs font-medium uppercase text-red-400"
+                  className="ml-auto mr-1 rounded-sm border-0 bg-red-900/30 px-1 font-mono text-xs font-medium uppercase text-red-400"
                 >
                   Error
                 </Badge>
               )}
             </div>
             {span.spanAttributes['gateway.upstream.subgraph.name'] ? (
-              <div
-                className={cn(
-                  'overflow-hidden overflow-ellipsis whitespace-nowrap text-xs',
-                  isDimmed ? 'text-gray-600' : 'text-gray-500',
-                )}
-              >
+              <div className={cn('truncate text-xs', isDimmed ? 'text-gray-600' : 'text-gray-500')}>
                 {span.spanAttributes['gateway.upstream.subgraph.name']}
               </div>
             ) : null}
@@ -635,7 +630,7 @@ function SpanNode(props: SpanNodeProps) {
                   <TooltipTrigger asChild>
                     <Link
                       className={cn(
-                        'absolute bottom-0 top-0 z-50 translate-x-[-50%] cursor-pointer px-1',
+                        'absolute inset-y-0 z-50 translate-x-[-50%] cursor-pointer px-1',
                       )}
                       style={{ left: `${leftPercentage}%` }}
                       to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
@@ -650,13 +645,13 @@ function SpanNode(props: SpanNodeProps) {
                       <div className="relative h-full">
                         <div
                           className={cn(
-                            'absolute bottom-0 top-0 w-0.5',
+                            'absolute inset-y-0 w-0.5',
                             isError ? 'bg-red-500' : 'bg-yellow-500',
                           )}
                         >
                           <div
                             className={cn(
-                              'absolute -left-[3px] -top-[2px] h-2 w-2',
+                              'absolute left-[-3px] top-[-2px] size-2',
                               isError ? 'bg-red-500' : 'bg-yellow-500',
                             )}
                           />
@@ -817,7 +812,7 @@ export function TraceSheet(props: TraceSheetProps) {
           <ResizablePanel defaultSize={30} minSize={10} maxSize={80}>
             <div className="flex h-full flex-col">
               <div className="sticky top-0 z-10 border-b border-gray-800">
-                <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+                <div className="flex w-full gap-x-4 px-2 text-xs font-medium">
                   <TabButton
                     isActive={activeView === 'span-attributes'}
                     onClick={() => setActiveView('span-attributes')}
@@ -890,7 +885,7 @@ export function TraceSheet(props: TraceSheetProps) {
                         ))
                       ) : (
                         <div className="py-4 text-center">
-                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                          <AlertTriangle className="mx-auto mb-2 size-6 text-gray-500" />
                           <p className="text-xs text-gray-500">
                             No attributes found for this trace
                           </p>
@@ -910,7 +905,7 @@ export function TraceSheet(props: TraceSheetProps) {
                         ))
                       ) : (
                         <div className="py-4 text-center">
-                          <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                          <AlertTriangle className="mx-auto mb-2 size-6 text-gray-500" />
                           <p className="text-xs text-gray-500">
                             No resource attributes found for this trace
                           </p>
@@ -954,9 +949,9 @@ export function TraceSheet(props: TraceSheetProps) {
                     </div>
                   ) : null}
                   {activeView === 'operation' ? (
-                    <div className="absolute bottom-0 top-0 w-full">
+                    <div className="absolute inset-y-0 w-full">
                       <GraphQLHighlight
-                        height={'100%'}
+                        height="100%"
                         options={{
                           fontSize: 10,
                           minimap: { enabled: false },
@@ -1183,7 +1178,7 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
 
     parent.children.push(item);
     item.startNs = parseRFC3339ToEpochNanos(uitem.startTime) - startNS;
-    if (item.percentageOfTotal == '') {
+    if (item.percentageOfTotal === '') {
       item.percentageOfTotal = (
         (nanosecondsToMilliseconds(item.durationNs) /
           nanosecondsToMilliseconds(rootSpan.durationNs)) *
@@ -1212,10 +1207,10 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
 }
 
 export function formatNanoseconds(nsBigInt: bigint) {
-  const TEN_THOUSAND_NS = 10000n;
+  const TEN_THOUSAND_NS = 10_000n;
 
   if (nsBigInt === 0n) {
-    return `0ms`;
+    return '0ms';
   }
 
   if (nsBigInt < TEN_THOUSAND_NS) {
@@ -1291,7 +1286,7 @@ function stringToHSL(str: string, saturation = 70, lightness = 40) {
 }
 
 function nanosecondsToMilliseconds(nsBigInt: bigint) {
-  const oneMillion = 1000000n;
+  const oneMillion = 1_000_000n;
   const msBigInt = nsBigInt / oneMillion; // BigInt division, truncates remainder
 
   return Number(msBigInt); // Convert BigInt to Number
@@ -1349,7 +1344,7 @@ function SpanSheet(props: SpanSheetProps) {
   );
 
   return (
-    <Sheet open={true} onOpenChange={props.onClose}>
+    <Sheet open onOpenChange={props.onClose}>
       <SheetContent className="flex flex-col border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
         <SheetHeader className="relative border-b border-gray-800 p-4">
           <div className="flex items-center justify-between">
@@ -1369,7 +1364,7 @@ function SpanSheet(props: SpanSheetProps) {
             <div className="grid grid-cols-2 gap-4 pt-3 md:grid-cols-4">
               {/* Duration */}
               <div className="flex items-center space-x-2">
-                <Clock className="h-4 w-4 text-blue-500" />
+                <Clock className="size-4 text-blue-500" />
                 <div>
                   <p className="text-muted-foreground text-xs">Duration</p>
                   <p className="text-sm font-medium">
@@ -1382,7 +1377,7 @@ function SpanSheet(props: SpanSheetProps) {
               {/* Start Time */}
               {props.computedSpanMetrics.startNs !== 0n && (
                 <div className="flex items-center space-x-2">
-                  <Play className="h-4 w-4 text-green-500" />
+                  <Play className="size-4 text-green-500" />
                   <div>
                     <p className="text-muted-foreground text-xs">Start</p>
                     <p className="text-sm font-medium">
@@ -1396,7 +1391,7 @@ function SpanSheet(props: SpanSheetProps) {
               {/* Percentage of Total */}
               {props.computedSpanMetrics.percentageOfTotal && (
                 <div className="flex items-center space-x-2">
-                  <PieChart className="h-4 w-4 text-purple-500" />
+                  <PieChart className="size-4 text-purple-500" />
                   <div>
                     <p className="text-muted-foreground text-xs">% of Total</p>
                     <p className="text-sm font-medium">
@@ -1410,7 +1405,7 @@ function SpanSheet(props: SpanSheetProps) {
               {/* Percentage of Parent */}
               {props.computedSpanMetrics.percentageOfParentSpan && (
                 <div className="flex items-center space-x-2">
-                  <TreePine className="h-4 w-4 text-orange-500" />
+                  <TreePine className="size-4 text-orange-500" />
                   <div>
                     <p className="text-muted-foreground text-xs">% of Parent</p>
                     <p className="text-sm font-medium">
@@ -1426,7 +1421,7 @@ function SpanSheet(props: SpanSheetProps) {
         <div className="overflow-hidden">
           <div className="flex h-full flex-col">
             <div className="sticky top-0 z-10 border-b border-gray-800">
-              <div className="item-center flex w-full gap-x-4 px-2 text-xs font-medium">
+              <div className="flex w-full gap-x-4 px-2 text-xs font-medium">
                 <TabButton
                   isActive={activeView === 'span-attributes'}
                   onClick={() => setActiveView('span-attributes')}
@@ -1492,7 +1487,7 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   ) : (
                     <div className="py-4 text-center">
-                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <AlertTriangle className="mx-auto mb-2 size-6 text-gray-500" />
                       <p className="text-xs text-gray-500">
                         No span attributes found for this span.
                       </p>
@@ -1514,7 +1509,7 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   ) : (
                     <div className="py-4 text-center">
-                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <AlertTriangle className="mx-auto mb-2 size-6 text-gray-500" />
                       <p className="text-xs text-gray-500">
                         No resource attributes found for this span.
                       </p>
@@ -1546,7 +1541,7 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   ) : (
                     <div className="py-4 text-center">
-                      <AlertTriangle className="mx-auto mb-2 h-6 w-6 text-gray-500" />
+                      <AlertTriangle className="mx-auto mb-2 size-6 text-gray-500" />
                       <p className="text-xs text-gray-500">No events found for this span.</p>
                     </div>
                   )}
@@ -1568,12 +1563,12 @@ function SpanSheet(props: SpanSheetProps) {
                 }}
                 search={{ activeSpanId: span.parentId }}
               >
-                <ArrowUp className="mr-2 h-4 w-4" /> Show Parent Span
+                <ArrowUp className="mr-2 size-4" /> Show Parent Span
               </Link>
             </Button>
           )}
           <Button variant="ghost" size="sm" onClick={() => clipboard(window.location.href)}>
-            <LinkLucide className="mr-2 h-4 w-4" /> Share Link
+            <LinkLucide className="mr-2 size-4" /> Share Link
           </Button>
         </SheetFooter>
       </SheetContent>
@@ -1609,7 +1604,7 @@ function AttributeRow(props: AttributeRowProps) {
     <div
       key={props.attributeKey}
       className={cn(
-        'border-border flex items-center justify-between border-b px-3 py-3 text-xs last:border-0',
+        'border-border flex items-center justify-between border-b p-3 text-xs last:border-0',
         isExpanded && 'flex-col text-left',
       )}
     >
@@ -1666,7 +1661,7 @@ function ExceptionTeaser(props: {
     <div className="overflow-hidden rounded-md border border-red-800/50 bg-red-900/20">
       <div className="flex items-center justify-between bg-red-900/40 px-3 py-2">
         <span className="font-mono text-xs font-medium text-red-300">{props.type}</span>
-        <Badge variant="outline" className="border-red-700 bg-red-950 text-[10px] text-red-300">
+        <Badge variant="outline" className="border-red-700 bg-red-900 text-[10px] text-red-300">
           {props.name}
         </Badge>
       </div>
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 9646702e5e..f955369163 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -108,7 +108,7 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
 
   // Handle mouse down event to start selection
   const handleMouseDown = useCallback((e: any) => {
-    if (!e || !e.activeLabel) return;
+    if (!e?.activeLabel) return;
 
     // Check if the click is within the chart area and not on the Y-axis
     // e.chartX is the x-coordinate of the click relative to the chart
@@ -122,7 +122,7 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
   // Handle mouse move event during selection
   const handleMouseMove = useCallback(
     (e: any) => {
-      if (!isSelecting || !e || !e.activeLabel) return;
+      if (!isSelecting || !e?.activeLabel) return;
       setRefAreaRight(e.activeLabel);
     },
     [isSelecting],
@@ -193,8 +193,8 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
             />
           }
         />
-        <Bar stackId="all" dataKey="ok" fill={`var(--color-ok)`} name="Ok" />
-        <Bar stackId="all" dataKey="error" fill={`var(--color-error)`} name="Error" />
+        <Bar stackId="all" dataKey="ok" fill="var(--color-ok)" name="Ok" />
+        <Bar stackId="all" dataKey="error" fill="var(--color-error)" name="Error" />
         <Bar stackId="all" dataKey="remaining" fill="rgba(170,175,180,0.1)" name="Filtered out" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
@@ -647,28 +647,28 @@ const TracesList = memo(function TracesList(
 function LabelWithColor(props: { className: string; children: ReactNode }) {
   return (
     <div className="flex items-center gap-x-2">
-      <div className={cn(`rounded-xs h-[11px] w-[2px]`, props.className)}></div>
+      <div className={cn('rounded-xs h-[11px] w-[2px]', props.className)} />
       <div>{props.children}</div>
     </div>
   );
 }
 
-function LabelWithBadge(props: {
-  children: ReactNode;
-  badgeText: string;
-  side?: 'left' | 'right';
-}) {
-  return (
-    <div
-      className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
-    >
-      <Badge variant="outline" className="rounded-sm px-1 font-normal">
-        {props.badgeText}
-      </Badge>
-      <span className="text-foreground font-medium">{props.children}</span>
-    </div>
-  );
-}
+// function LabelWithBadge(props: {
+//   children: ReactNode;
+//   badgeText: string;
+//   side?: 'left' | 'right';
+// }) {
+//   return (
+//     <div
+//       className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
+//     >
+//       <Badge variant="outline" className="rounded-sm px-1 font-normal">
+//         {props.badgeText}
+//       </Badge>
+//       <span className="text-foreground font-medium">{props.children}</span>
+//     </div>
+//   );
+// }
 
 export const TargetTracesFilterState = z.object({
   period: z.union([z.tuple([z.string(), z.string()]), z.tuple([])]).default([]),
@@ -752,7 +752,7 @@ function Filters(
   const filterSelector = <$Key extends FilterKeys>(key: $Key) => filters[key];
 
   const hasChanges = useMemo(() => {
-    for (let key in filters) {
+    for (const key in filters) {
       const filterName = key as FilterKeys;
 
       if (filterName === 'duration') {
@@ -792,7 +792,14 @@ function Filters(
       <MultiSelectFilter
         key="graphql.status"
         name="Status"
-        options={filterOptions['graphql.status']}
+        options={filterOptions['graphql.status'].map(option => ({
+          ...option,
+          label: (
+            <LabelWithColor className={option.value === 'ok' ? 'bg-green-600' : 'bg-red-600'}>
+              {option.label}
+            </LabelWithColor>
+          ),
+        }))}
         selectedValues={filterSelector('graphql.status')}
         onChange={updateFilter('graphql.status')}
         hideSearch
@@ -800,7 +807,10 @@ function Filters(
       <MultiSelectFilter
         key="graphql.errorCode"
         name="Error Code"
-        options={filterOptions['graphql.errorCode']}
+        options={filterOptions['graphql.errorCode'].map(option => ({
+          ...option,
+          label: <LabelWithColor className="bg-red-600">{option.label}</LabelWithColor>,
+        }))}
         selectedValues={filterSelector('graphql.errorCode')}
         onChange={updateFilter('graphql.errorCode')}
         hideSearch
@@ -931,7 +941,7 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
           </SheetDescription>
           <div className="mt-2 flex items-center gap-3 text-xs">
             <div className="flex items-center gap-1">
-              <Clock className="h-3 w-3 text-gray-400" />
+              <Clock className="size-3 text-gray-400" />
               <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
             </div>
             <Badge
@@ -958,7 +968,7 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
               }}
               className="absolute bottom-4 right-4"
             >
-              <ExternalLinkIcon className="mr-1 h-3 w-3" />
+              <ExternalLinkIcon className="mr-1 size-3" />
               Full Trace
             </Link>
           </Button>
diff --git a/packages/web/app/src/pages/traces/target-traces-filter.tsx b/packages/web/app/src/pages/traces/target-traces-filter.tsx
index fca322382c..33fee7aef0 100644
--- a/packages/web/app/src/pages/traces/target-traces-filter.tsx
+++ b/packages/web/app/src/pages/traces/target-traces-filter.tsx
@@ -160,11 +160,9 @@ export const MultiInputFilter = memo(
 
     return (
       <Filter name={props.name}>
-        <FilterTitle
-          changes={props.selectedValues.length}
-          children={props.name}
-          onReset={() => props.onChange([])}
-        />
+        <FilterTitle changes={props.selectedValues.length} onReset={() => props.onChange([])}>
+          {props.name}
+        </FilterTitle>
         <FilterContent>
           <form
             className="mt-4 flex w-full max-w-sm items-center space-x-2"
@@ -181,7 +179,7 @@ export const MultiInputFilter = memo(
             />
             <Button
               variant="secondary"
-              className="h-9 w-9 p-0"
+              className="size-9 p-0"
               type="submit"
               onClick={() => {
                 addTraceId();
@@ -212,7 +210,7 @@ export const MultiInputFilter = memo(
   },
 );
 
-export const MultiSelectFilter = memo(function <$Value>(props: {
+export const MultiSelectFilter = function MultiSelectFilter<$Value>(props: {
   name: string;
   /**
    * Filter's key for the backend and url state
@@ -255,11 +253,9 @@ export const MultiSelectFilter = memo(function <$Value>(props: {
 
   return (
     <Filter name={props.name}>
-      <FilterTitle
-        changes={props.selectedValues.length}
-        children={props.name}
-        onReset={() => props.onChange([])}
-      />
+      <FilterTitle changes={props.selectedValues.length} onReset={() => props.onChange([])}>
+        {props.name}
+      </FilterTitle>
       <FilterContent>
         {!props.hideSearch && <FilterLocalSearch value={searchPhrase} onChange={setSearchPhrase} />}
         {filteredOptions.map((option, index) => (
@@ -281,7 +277,7 @@ export const MultiSelectFilter = memo(function <$Value>(props: {
       </FilterContent>
     </Filter>
   );
-});
+};
 
 function FilterOption(props: {
   onClick(): void;
@@ -338,7 +334,7 @@ const DoubleSlider = forwardRef<
     {props.value?.map((_, index) => (
       <SliderPrimitive.Thumb
         key={index}
-        className="block h-4 w-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+        className="block size-4 rounded-full border border-gray-700 bg-gray-800 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
       />
     ))}
   </SliderPrimitive.Root>
@@ -347,7 +343,7 @@ const DoubleSlider = forwardRef<
 export const DurationFilter = memo(
   (props: { value: [number, number] | []; onChange(value: [number, number]): void }) => {
     const minValue = 0;
-    const maxValue = 100000;
+    const maxValue = 100_000;
     const defaultValues: [number, number] = [minValue, maxValue];
     const [values, setValues] = useState<[number, number]>(
       props.value.length ? props.value : defaultValues,
@@ -399,9 +395,10 @@ export const DurationFilter = memo(
       <Filter name="Duration">
         <FilterTitle
           changes={values[0] === minValue && values[1] === maxValue ? 0 : 1}
-          children={'Duration'}
           onReset={() => props.onChange(defaultValues)}
-        />
+        >
+          Duration
+        </FilterTitle>
         <FilterContent>
           <div className="space-y-6 p-2">
             <div className="space-y-2">
@@ -441,7 +438,7 @@ export const DurationFilter = memo(
               step={1}
               value={values}
               onValueChange={handleSliderChange}
-              className="[&_[role=slider]]:h-4 [&_[role=slider]]:w-4"
+              className="[&_[role=slider]]:size-4"
             />
           </div>
         </FilterContent>
@@ -518,11 +515,9 @@ export const TimelineFilter = memo(
 
     return (
       <Filter name="Timeline">
-        <FilterTitle
-          changes={props.value.length ? 1 : 0}
-          children={'Timeline'}
-          onReset={() => props.onChange([])}
-        />
+        <FilterTitle changes={props.value.length ? 1 : 0} onReset={() => props.onChange([])}>
+          Timeline
+        </FilterTitle>
         <FilterContent>
           <div className="space-y-2 p-2">
             <Select
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index c56a09f373..34d1b8868f 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -1,6 +1,5 @@
 import { lazy, useCallback, useEffect } from 'react';
 import { parse as jsUrlParse, stringify as jsUrlStringify } from 'jsurl2';
-import qs from 'query-string';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { ToastContainer } from 'react-toastify';
 import SuperTokens, { SuperTokensWrapper } from 'supertokens-auth-react';
diff --git a/packages/web/app/tailwind.config.ts b/packages/web/app/tailwind.config.ts
index d952180f9d..774c71c7d2 100644
--- a/packages/web/app/tailwind.config.ts
+++ b/packages/web/app/tailwind.config.ts
@@ -75,7 +75,6 @@ module.exports = {
         900: '#005b43',
       },
       cyan: '#0acccc',
-      purple: '#5f2eea',
       blue: colors.sky,
       gray: colors.stone,
       magenta: '#f11197',
@@ -91,6 +90,8 @@ module.exports = {
         800: '#926e26',
         900: '#785a1f',
       },
+      zinc: colors.zinc,
+      purple: colors.purple,
     },
     extend: {
       colors: {
@@ -142,6 +143,7 @@ module.exports = {
         lg: 'var(--radius)',
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
+        xs: 'calc(var(--radius) - 6px)',
       },
       ringColor: theme => ({
         DEFAULT: theme('colors.orange.500/75'),

From 82fbe27e756e59b05a490125c7d503f59a9b6377 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 14 Jul 2025 16:37:53 +0200
Subject: [PATCH 060/123] fix runtime error

---
 packages/web/app/src/pages/target-traces.tsx | 10 +++++-----
 packages/web/app/src/router.tsx              | 20 ++++++++++++++++++--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index f955369163..5c173c4b94 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -687,7 +687,7 @@ export const TargetTracesFilterState = z.object({
   'http.url': z.array(z.string()).default([]),
 });
 
-type FilterState = z.infer<typeof TargetTracesFilterState>;
+export type FilterState = z.infer<typeof TargetTracesFilterState>;
 
 type FilterProps = {
   filter: FilterState;
@@ -1066,7 +1066,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
   const targetRef = useTargetReference();
 
   const period = useMemo(() => {
-    if (!props.filter.period.length) {
+    if (!props.filter.period?.length) {
       return null;
     }
     return dateMath.resolveRange({ from: props.filter.period[0], to: props.filter.period[1] });
@@ -1084,11 +1084,11 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
       filter: {
         period,
         duration: {
-          min: props.filter.duration[0] ?? null,
-          max: props.filter.duration[1] ?? null,
+          min: props.filter.duration?.[0] ?? null,
+          max: props.filter.duration?.[1] ?? null,
         },
         traceIds: props.filter['trace.id'],
-        success: props.filter['graphql.status'].map(status => (status === 'ok' ? true : false)),
+        success: props.filter['graphql.status']?.map(status => (status === 'ok' ? true : false)),
         errorCodes: props.filter['graphql.errorCode'],
         operationNames: props.filter['graphql.operation'],
         operationTypes: props.filter['graphql.kind'] as any,
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 34d1b8868f..b567ab6959 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -79,6 +79,7 @@ import { TargetLaboratoryPage } from './pages/target-laboratory';
 import { TargetSettingsPage, TargetSettingsPageEnum } from './pages/target-settings';
 import { TargetTracePage } from './pages/target-trace';
 import {
+  FilterState,
   PaginationState,
   TargetTracesFilterState,
   TargetTracesPage,
@@ -670,7 +671,22 @@ const targetTracesRoute = createRoute({
   component: function TargetTracesRoute() {
     const { organizationSlug, projectSlug, targetSlug } = targetTracesRoute.useParams();
     const {
-      filter = {},
+      filter = {
+        'graphql.client': [],
+        'graphql.errorCode': [],
+        'graphql.kind': [],
+        'graphql.operation': [],
+        'graphql.status': [],
+        'graphql.subgraph': [],
+        'http.host': [],
+        'http.method': [],
+        'http.route': [],
+        'http.status': [],
+        'http.url': [],
+        'trace.id': [],
+        duration: [],
+        period: [],
+      } satisfies FilterState,
       sort = [],
       pagination = {
         pageIndex: 0,
@@ -685,7 +701,7 @@ const targetTracesRoute = createRoute({
         targetSlug={targetSlug}
         sorting={sort}
         pagination={pagination}
-        filter={filter as any}
+        filter={filter}
       />
     );
   },

From 9458b5797ac39aa3ff7c24b8c5af9af3f9392029 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 10:20:14 +0200
Subject: [PATCH 061/123] feature flag

---
 .../src/modules/operations/module.graphql.ts  |  5 +++
 .../modules/operations/providers/traces.ts    | 37 +++++++++++++++++--
 .../modules/operations/resolvers/Target.ts    | 10 +++--
 .../web/app/src/components/layouts/target.tsx | 27 ++++++++------
 4 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 46b2820116..88faea79cc 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -456,6 +456,11 @@ export default gql`
     Retrieve an operation via it's hash.
     """
     operation(hash: ID! @tag(name: "public")): Operation @tag(name: "public")
+
+    """
+    Whether the viewer can access OTEL traces
+    """
+    viewerCanAccessTraces: Boolean!
     traces(first: Int, after: String, filter: TracesFilterInput): TraceConnection!
     tracesFilterOptions(filter: TracesFilterInput): TracesFilterOptions!
     tracesStatusBreakdown(filter: TracesFilterInput): [TraceStatusBreakdownBucket!]!
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index a97f318f83..9f5aca368e 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -2,8 +2,10 @@ import { Injectable } from 'graphql-modules';
 import { z } from 'zod';
 import { subDays } from '@/lib/date-time';
 import * as GraphQLSchema from '../../../__generated__/types';
+import { HiveError } from '../../../shared/errors';
 import { batch, parseDateRangeInput } from '../../../shared/helpers';
 import { Logger } from '../../shared/providers/logger';
+import { Storage } from '../../shared/providers/storage';
 import { ClickHouse, sql } from './clickhouse-client';
 import { formatDate } from './operations-reader';
 import { SqlValue } from './sql';
@@ -15,8 +17,21 @@ export class Traces {
   constructor(
     private clickHouse: ClickHouse,
     private logger: Logger,
+    private storage: Storage,
   ) {}
 
+  async viewerCanAccessTraces(organizationId: string) {
+    const organization = await this.storage.getOrganization({ organizationId });
+    return organization.featureFlags.otelTracing;
+  }
+
+  private async _guardViewerCanAccessTraces(organizationId: string) {
+    if (await this.viewerCanAccessTraces(organizationId)) {
+      return;
+    }
+    throw new HiveError("You don't have acces to this feature.");
+  }
+
   private _findTraceByTraceId = batch<string, Trace | null>(async (traceIds: Array<string>) => {
     this.logger.debug('looking up traces by id (traceIds=%o)', traceIds);
     const result = await this.clickHouse.query<unknown>({
@@ -48,7 +63,12 @@ export class Traces {
    * Find a specific trace by it's id.
    * Uses batching under the hood.
    */
-  async findTraceById(targetId: string, traceId: string): Promise<Trace | null> {
+  async findTraceById(
+    organizationId: string,
+    targetId: string,
+    traceId: string,
+  ): Promise<Trace | null> {
+    await this._guardViewerCanAccessTraces(organizationId);
     this.logger.debug('find trace by id (targetId=%s, traceId=%s)', targetId, traceId);
     const trace = await this._findTraceByTraceId(traceId);
     if (!trace) {
@@ -88,7 +108,13 @@ export class Traces {
     return SpanListModel.parse(result.data);
   }
 
-  async findTracesForTargetId(targetId: string, first: number | null, filter: TraceFilter) {
+  async findTracesForTargetId(
+    organizationId: string,
+    targetId: string,
+    first: number | null,
+    filter: TraceFilter,
+  ) {
+    await this._guardViewerCanAccessTraces(organizationId);
     const limit = (first ?? 10) + 1;
     const sqlConditions = buildTraceFilterSQLConditions(filter);
     const filterSQLFragment = sqlConditions.length
@@ -143,7 +169,12 @@ export class Traces {
     };
   }
 
-  async getTraceStatusBreakdownForTargetId(targetId: string, filter: TraceFilter) {
+  async getTraceStatusBreakdownForTargetId(
+    organizationId: string,
+    targetId: string,
+    filter: TraceFilter,
+  ) {
+    await this._guardViewerCanAccessTraces(organizationId);
     const sqlConditions = buildTraceFilterSQLConditions(filter, true);
     const filterSQLFragment = sqlConditions.length
       ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 78926d8b41..5217417cd1 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -18,6 +18,7 @@ export const Target: Pick<
   | 'traces'
   | 'tracesFilterOptions'
   | 'tracesStatusBreakdown'
+  | 'viewerCanAccessTraces'
 > = {
   totalRequests: (target, { period }, { injector }) => {
     return injector.get(OperationsManager).countRequests({
@@ -78,7 +79,7 @@ export const Target: Pick<
     };
   },
   traces: async (target, { first, filter }, { injector }) => {
-    return injector.get(Traces).findTracesForTargetId(target.id, first ?? null, {
+    return injector.get(Traces).findTracesForTargetId(target.orgId, target.id, first ?? null, {
       period: filter?.period ?? null,
       duration: filter?.duration
         ? {
@@ -227,10 +228,10 @@ export const Target: Pick<
     };
   },
   trace(target, args, { injector }) {
-    return injector.get(Traces).findTraceById(target.id, args.traceId);
+    return injector.get(Traces).findTraceById(target.orgId, target.id, args.traceId);
   },
   tracesStatusBreakdown: async (target, { filter }, { injector }) => {
-    return injector.get(Traces).getTraceStatusBreakdownForTargetId(target.id, {
+    return injector.get(Traces).getTraceStatusBreakdownForTargetId(target.orgId, target.id, {
       period: filter?.period ?? null,
       duration: filter?.duration
         ? {
@@ -252,4 +253,7 @@ export const Target: Pick<
       httpUrls: filter?.httpUrls ?? null,
     });
   },
+  viewerCanAccessTraces: async (target, _, { injector }) => {
+    return injector.get(Traces).viewerCanAccessTraces(target.orgId);
+  },
 };
diff --git a/packages/web/app/src/components/layouts/target.tsx b/packages/web/app/src/components/layouts/target.tsx
index 77ee1de929..b33eaaf9e1 100644
--- a/packages/web/app/src/components/layouts/target.tsx
+++ b/packages/web/app/src/components/layouts/target.tsx
@@ -104,6 +104,7 @@ const TargetLayoutQuery = graphql(`
           viewerCanViewLaboratory
           viewerCanViewAppDeployments
           viewerCanAccessSettings
+          viewerCanAccessTraces
           latestSchemaVersion {
             id
           }
@@ -248,18 +249,20 @@ export const TargetLayout = ({
                         Insights
                       </Link>
                     </TabsTrigger>
-                    <TabsTrigger variant="menu" value={Page.Traces} asChild>
-                      <Link
-                        to="/$organizationSlug/$projectSlug/$targetSlug/traces"
-                        params={{
-                          organizationSlug: props.organizationSlug,
-                          projectSlug: props.projectSlug,
-                          targetSlug: props.targetSlug,
-                        }}
-                      >
-                        Traces
-                      </Link>
-                    </TabsTrigger>
+                    {currentTarget.viewerCanAccessTraces && (
+                      <TabsTrigger variant="menu" value={Page.Traces} asChild>
+                        <Link
+                          to="/$organizationSlug/$projectSlug/$targetSlug/traces"
+                          params={{
+                            organizationSlug: props.organizationSlug,
+                            projectSlug: props.projectSlug,
+                            targetSlug: props.targetSlug,
+                          }}
+                        >
+                          Traces
+                        </Link>
+                      </TabsTrigger>
+                    )}
                     {currentTarget.viewerCanViewAppDeployments && (
                       <TabsTrigger variant="menu" value={Page.Apps} asChild>
                         <Link

From 4dc0bb3c5db53e365a611709e7adeb5e92673808 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 10:53:33 +0200
Subject: [PATCH 062/123] implement time bucket selection via diagram

---
 packages/web/app/src/pages/target-traces.tsx | 28 +++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 5c173c4b94..8de1b6f50a 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -41,7 +41,7 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { cn } from '@/lib/utils';
-import { Link, useRouter } from '@tanstack/react-router';
+import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import {
   flexRender,
   getCoreRowModel,
@@ -92,7 +92,7 @@ type TrafficProps = {
   buckets: Array<FragmentType<typeof Traffic_TracesStatusBreakdownBucketFragment>>;
 };
 
-const Traffic = memo(function Traffic(props: TrafficProps) {
+const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
   const buckets = useFragment(Traffic_TracesStatusBreakdownBucketFragment, props.buckets);
   const data = buckets.map(b => ({
     ok: b.okCountFiltered,
@@ -102,7 +102,6 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
   }));
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
-  const [_, setZoomedData] = useState<typeof data | null>(null);
   const [isSelecting, setIsSelecting] = useState(false);
   const chartContainerRef = useRef<HTMLDivElement>(null);
 
@@ -128,6 +127,8 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
     [isSelecting],
   );
 
+  const navigate = useNavigate();
+
   // Handle mouse up event to end selection
   const handleMouseUp = useCallback(() => {
     if (!refAreaLeft || !refAreaRight) {
@@ -146,10 +147,14 @@ const Traffic = memo(function Traffic(props: TrafficProps) {
       [left, right] = [right, left];
     }
 
+    navigate({
+      search: (prev: any) => ({ ...prev, filter: { ...prev.filter, period: [left, right] } }),
+    });
+
     setRefAreaLeft(null);
     setRefAreaRight(null);
     setIsSelecting(false);
-  }, [refAreaLeft, refAreaRight]);
+  }, [refAreaLeft, refAreaRight, navigate]);
 
   return (
     <ChartContainer
@@ -1062,7 +1067,6 @@ const TargetTracesPageQuery = graphql(`
 `);
 
 function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
-  const [filtersOpen, setFiltersOpen] = useState(true);
   const targetRef = useTargetReference();
 
   const period = useMemo(() => {
@@ -1208,17 +1212,15 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
   return (
     <div className="py-6">
       <SidebarProvider>
-        {filtersOpen ? (
-          <Sidebar collapsible="none" className="bg-transparent">
-            <SidebarContent>
-              <Filters filter={props.filter} options={filterOptions} />
-            </SidebarContent>
-          </Sidebar>
-        ) : null}
+        <Sidebar collapsible="none" className="bg-transparent">
+          <SidebarContent>
+            <Filters filter={props.filter} options={filterOptions} />
+          </SidebarContent>
+        </Sidebar>
         <SidebarInset className="bg-transparent">
           <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
             <div>
-              <Traffic buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
+              <TrafficBucketDiagram buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
             </div>
             <TracesList
               sorting={props.sorting}

From d872ab0d68dd0f3ad7e2a42a48cd0b030b7a5608 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 11:10:40 +0200
Subject: [PATCH 063/123] save the day

---
 packages/web/app/src/pages/target-traces.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 8de1b6f50a..7888a0baea 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -147,7 +147,7 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
       [left, right] = [right, left];
     }
 
-    navigate({
+    void navigate({
       search: (prev: any) => ({ ...prev, filter: { ...prev.filter, period: [left, right] } }),
     });
 

From 46b09f37b07eeeb4506361a9e8b00f1da8de85f0 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 11:46:47 +0200
Subject: [PATCH 064/123] order by timestamp or duration asc/desc

---
 .../src/modules/operations/module.graphql.ts  | 22 ++++++-
 .../modules/operations/providers/traces.ts    | 12 +++-
 .../modules/operations/resolvers/Target.ts    | 50 +++++++-------
 packages/web/app/src/pages/target-traces.tsx  | 65 ++++++++-----------
 4 files changed, 86 insertions(+), 63 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 88faea79cc..6a26b53a6d 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -426,6 +426,21 @@ export default gql`
     count: Int!
   }
 
+  enum SortDirectionType {
+    ASC
+    DESC
+  }
+
+  enum TracesSortType {
+    DURATION
+    TIMESTAMP
+  }
+
+  input TracesSortInput {
+    sort: TracesSortType!
+    direction: SortDirectionType!
+  }
+
   type TraceStatusBreakdownBucket {
     """
     The time bucket for the data
@@ -461,7 +476,12 @@ export default gql`
     Whether the viewer can access OTEL traces
     """
     viewerCanAccessTraces: Boolean!
-    traces(first: Int, after: String, filter: TracesFilterInput): TraceConnection!
+    traces(
+      first: Int
+      after: String
+      filter: TracesFilterInput
+      sort: TracesSortInput
+    ): TraceConnection!
     tracesFilterOptions(filter: TracesFilterInput): TracesFilterOptions!
     tracesStatusBreakdown(filter: TracesFilterInput): [TraceStatusBreakdownBucket!]!
     trace(traceId: ID!): Trace
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 9f5aca368e..bc5284294b 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -113,6 +113,7 @@ export class Traces {
     targetId: string,
     first: number | null,
     filter: TraceFilter,
+    sort: GraphQLSchema.TracesSortInput | null,
   ) {
     await this._guardViewerCanAccessTraces(organizationId);
     const limit = (first ?? 10) + 1;
@@ -121,6 +122,14 @@ export class Traces {
       ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
       : sql``;
 
+    // By default we order by timestamp DESC
+    // In case a custom sort is provided, we order by duration asc/desc or timestamp asc
+    const orderByFragment = sql`
+      ${sort?.sort === 'DURATION' ? sql`"duration" ${sort.direction === 'ASC' ? sql`ASC` : sql`DESC`},` : sql``}
+      "timestamp" ${sort?.sort === 'TIMESTAMP' && sort?.direction === 'ASC' ? sql`ASC` : sql`DESC`}
+      , "trace_id" DESC
+    `;
+
     const tracesQuery = await this.clickHouse.query<unknown>({
       query: sql`
         SELECT
@@ -131,8 +140,7 @@ export class Traces {
           target_id = ${targetId}
           ${filterSQLFragment}
         ORDER BY
-          "timestamp" DESC
-          , "trace_id" DESC
+          ${orderByFragment}
         LIMIT ${sql.raw(String(limit))}
       `,
       queryId: 'traces',
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 5217417cd1..0ce40f2fcb 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -78,28 +78,34 @@ export const Target: Pick<
       schemaCoordinate: args.schemaCoordinate,
     };
   },
-  traces: async (target, { first, filter }, { injector }) => {
-    return injector.get(Traces).findTracesForTargetId(target.orgId, target.id, first ?? null, {
-      period: filter?.period ?? null,
-      duration: filter?.duration
-        ? {
-            min: filter.duration.min ?? null,
-            max: filter.duration.max ?? null,
-          }
-        : null,
-      traceIds: filter?.traceIds ?? null,
-      success: filter?.success ?? null,
-      errorCodes: filter?.errorCodes ?? null,
-      operationNames: filter?.operationNames ?? null,
-      operationTypes: filter?.operationTypes ?? null,
-      clientNames: filter?.clientNames ?? null,
-      subgraphNames: filter?.subgraphNames ?? null,
-      httpMethods: filter?.httpMethods ?? null,
-      httpStatusCodes: filter?.httpStatusCodes ?? null,
-      httpHosts: filter?.httpHosts ?? null,
-      httpRoutes: filter?.httpRoutes ?? null,
-      httpUrls: filter?.httpUrls ?? null,
-    });
+  traces: async (target, { first, filter, sort }, { injector }) => {
+    return injector.get(Traces).findTracesForTargetId(
+      target.orgId,
+      target.id,
+      first ?? null,
+      {
+        period: filter?.period ?? null,
+        duration: filter?.duration
+          ? {
+              min: filter.duration.min ?? null,
+              max: filter.duration.max ?? null,
+            }
+          : null,
+        traceIds: filter?.traceIds ?? null,
+        success: filter?.success ?? null,
+        errorCodes: filter?.errorCodes ?? null,
+        operationNames: filter?.operationNames ?? null,
+        operationTypes: filter?.operationTypes ?? null,
+        clientNames: filter?.clientNames ?? null,
+        subgraphNames: filter?.subgraphNames ?? null,
+        httpMethods: filter?.httpMethods ?? null,
+        httpStatusCodes: filter?.httpStatusCodes ?? null,
+        httpHosts: filter?.httpHosts ?? null,
+        httpRoutes: filter?.httpRoutes ?? null,
+        httpUrls: filter?.httpUrls ?? null,
+      },
+      sort ?? null,
+    );
   },
   tracesFilterOptions: async (target, { filter }, { injector }) => {
     const ANDs: SqlValue[] = [sql`target_id = ${target.id}`];
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 7888a0baea..f062f7a02e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -416,19 +416,8 @@ const TracesList = memo(function TracesList(
       },
       {
         accessorKey: 'operationName',
-        header: ({ column }) => {
-          return (
-            <div>
-              <Button
-                variant="link"
-                className="text-muted-foreground"
-                onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-              >
-                Operation Name
-                <ArrowUpDown className="ml-2 size-4" />
-              </Button>
-            </div>
-          );
+        header: () => {
+          return <div className="text-muted-foreground px-4">Operation Name</div>;
         },
         cell: ({ row }) => (
           <TooltipProvider>
@@ -510,33 +499,33 @@ const TracesList = memo(function TracesList(
       },
       {
         accessorKey: 'subgraphs',
-        sortingFn(a, b, isAsc) {
-          const aValue = a.original.subgraphs.length;
-          const bValue = b.original.subgraphs.length;
-
-          if (isAsc) {
-            return aValue - bValue;
-          }
-
-          return bValue - aValue;
-        },
-        header: ({ column }) => (
-          <div className="text-center">
-            <Button
-              variant="link"
-              className="text-muted-foreground"
-              onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
-            >
-              Subgraphs
-              <ArrowUpDown className="ml-2 size-4" />
-            </Button>
-          </div>
-        ),
+        header: () => <div className="text-center">Subgraphs</div>,
         cell: ({ row }) => {
           return (
-            <div className="text-center font-mono text-xs font-medium">
-              {(row.getValue('subgraphs') as Array<string>).length}
-            </div>
+            <TooltipProvider>
+              <Tooltip disableHoverableContent delayDuration={100}>
+                <TooltipTrigger asChild>
+                  <div className="text-center font-mono text-xs font-medium">
+                    {(row.getValue('subgraphs') as Array<string>).length}
+                  </div>
+                </TooltipTrigger>
+                <TooltipContent
+                  side="bottom"
+                  className="overflow-hidden rounded-lg p-2 text-xs text-gray-100 shadow-lg sm:min-w-[150px]"
+                >
+                  <GridTable
+                    rows={[
+                      {
+                        key: 'Subgraphs',
+                        value: (row.getValue('subgraphs') as Array<string>).length
+                          ? (row.getValue('subgraphs') as Array<string>).join(', ')
+                          : '<none>',
+                      },
+                    ]}
+                  />
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           );
         },
       },

From 34b239067eef0c43b9664e7d59aae8650c60af72 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 14:06:37 +0200
Subject: [PATCH 065/123] lel

---
 tracing/notes.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tracing/notes.md b/tracing/notes.md
index 14418697e9..f41815e81a 100644
--- a/tracing/notes.md
+++ b/tracing/notes.md
@@ -1,8 +1,10 @@
 We want to:
+
 - show incoming graphql requests
 - show subgraph calls
 - track parse / validation / planning steps as well
-- annotate graphql requests with a list of subgraph names (so we can show operations that a subgraph is involved with)
+- annotate graphql requests with a list of subgraph names (so we can show operations that a subgraph
+  is involved with)
 - show performance of subgraph calls (latency, error rate - globally)
 - capture errors in subgraph calls
 - identify traces by client name and version

From 615096a640b4492cc0cff9132dbadf76f2471922 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 15 Jul 2025 14:08:24 +0200
Subject: [PATCH 066/123] build it

---
 docker/docker.hcl | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/docker/docker.hcl b/docker/docker.hcl
index d79a10f614..4b8ad0ead1 100644
--- a/docker/docker.hcl
+++ b/docker/docker.hcl
@@ -422,7 +422,8 @@ group "build" {
     "server",
     "commerce",
     "composition-federation-2",
-    "app"
+    "app",
+    "otel-collector"
   ]
 }
 
@@ -438,7 +439,8 @@ group "integration-tests" {
     "usage",
     "webhooks",
     "server",
-    "composition-federation-2"
+    "composition-federation-2",
+    "otel-collector"
   ]
 }
 
@@ -448,12 +450,6 @@ group "apollo-router-hive-build" {
   ]
 }
 
-group "otel-collector-hive-build" {
-  targets = [
-    "otel-collector"
-  ]
-}
-
 group "cli" {
   targets = [
     "cli"

From b19b6f5bbade4e746a683289ccc63a6f5d437a7d Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 17 Jul 2025 10:12:07 +0200
Subject: [PATCH 067/123] rename attributes

---
 configs/gateway.config.ts                     | 13 ++--
 deployment/services/otel-collector.ts         |  2 +-
 docker/docker-compose.community.yml           |  2 +-
 docker/docker-compose.dev.yml                 |  2 +-
 .../src/clickhouse-actions/015-otel-trace.ts  | 76 +++++++++++++++----
 packages/web/app/src/pages/target-trace.tsx   |  9 ++-
 scripts/seed-traces/sample-introspection.json |  4 +-
 scripts/seed-traces/sample-my-profile.json    | 18 ++---
 .../seed-traces/sample-products-overview.json | 18 ++---
 ...e-user-review-error-missing-variables.json |  4 +-
 .../sample-user-review-not-found.json         | 10 +--
 scripts/seed-traces/sample-user-review.json   | 18 ++---
 scripts/seed-traces/seed-traces.mts           |  6 +-
 13 files changed, 114 insertions(+), 68 deletions(-)

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
index 2272079ce5..090111056d 100644
--- a/configs/gateway.config.ts
+++ b/configs/gateway.config.ts
@@ -134,10 +134,11 @@ class HiveTracingSpanProcessor implements SpanProcessor {
             rootSpan.updateName(`${operationType} ${operationName}`);
 
             // Copy attributes to root span
-            rootSpan.setAttribute('hive.graphql.operation.type', operationType);
-            rootSpan.setAttribute('hive.graphql.operation.name', operationName ?? '');
-            rootSpan.setAttribute('hive.graphql.operation.document', document);
+            rootSpan.setAttribute('graphql.operation.type', operationType);
+            rootSpan.setAttribute('graphql.operation.name', operationName ?? '');
+            rootSpan.setAttribute('graphql.operation.document', document);
             rootSpan.setAttribute('hive.graphql.error.count', errorCount ?? 0);
+            rootSpan.setAttribute('hive.graphql.operation.hash', 'FOFOFOFOFOFOFOFOF');
 
             // Add the subgraph names as a comma-separated list
             if (subgraphNamesForTrace && subgraphNamesForTrace.size > 0) {
@@ -173,9 +174,9 @@ class HiveTracingSpanProcessor implements SpanProcessor {
       // add hive branded attributes
       //
       span.attributes['hive.subgraph.name'] = span.attributes['gateway.upstream.subgraph.name'];
-      span.attributes['hive.graphql.operation.document'] = span.attributes['graphql.document'];
-      span.attributes['hive.graphql.operation.name'] = span.attributes['graphql.operation.name'];
-      span.attributes['hive.graphql.operation.type'] = span.attributes['graphql.operation.type'];
+      span.attributes['graphql.operation.document'] = span.attributes['graphql.document'];
+      span.attributes['graphql.operation.name'] = span.attributes['graphql.operation.name'];
+      span.attributes['graphql.operation.type'] = span.attributes['graphql.operation.type'];
       // TODO: attributes for error codes
       // hive.graphql.error.count
       // span.attributes['hive.graphql.error.count'] = 0;
diff --git a/deployment/services/otel-collector.ts b/deployment/services/otel-collector.ts
index 7318df2c25..b8a587e51e 100644
--- a/deployment/services/otel-collector.ts
+++ b/deployment/services/otel-collector.ts
@@ -26,7 +26,7 @@ export function deployOTELCollector(args: {
         HIVE_OTEL_AUTH_ENDPOINT: serviceLocalEndpoint(args.graphql.service).apply(
           value => value + '/otel-auth',
         ),
-        CLICKHOUSE_PROTOCOL: 'tcp',
+        CLICKHOUSE_PROTOCOL: 'http',
       },
       /**
        * We are using the healthcheck extension.
diff --git a/docker/docker-compose.community.yml b/docker/docker-compose.community.yml
index 69b1fd1abd..6b45a16f95 100644
--- a/docker/docker-compose.community.yml
+++ b/docker/docker-compose.community.yml
@@ -430,7 +430,7 @@ services:
     image: '${DOCKER_REGISTRY}otel-collector${DOCKER_TAG}'
     environment:
       HIVE_OTEL_AUTH_ENDPOINT: 'http://server:3001/otel-auth'
-      CLICKHOUSE_PROTOCOL: tcp
+      CLICKHOUSE_PROTOCOL: 'http'
       CLICKHOUSE_HOST: clickhouse
       CLICKHOUSE_PORT: '8123'
       CLICKHOUSE_USERNAME: '${CLICKHOUSE_USER}'
diff --git a/docker/docker-compose.dev.yml b/docker/docker-compose.dev.yml
index bbd95cfd6d..7dfbad365f 100644
--- a/docker/docker-compose.dev.yml
+++ b/docker/docker-compose.dev.yml
@@ -186,7 +186,7 @@ services:
       dockerfile: ./../../otel-collector.dockerfile
     environment:
       HIVE_OTEL_AUTH_ENDPOINT: 'http://host.docker.internal:3001/otel-auth'
-      CLICKHOUSE_PROTOCOL: tcp
+      CLICKHOUSE_PROTOCOL: 'http'
       CLICKHOUSE_HOST: clickhouse
       CLICKHOUSE_PORT: 8123
       CLICKHOUSE_USERNAME: test
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 53bb7b02ff..b66ca8176b 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -129,6 +129,32 @@ export const action: Action = async exec => {
       , ttl_only_drop_parts = 1
   `);
 
+  // You might be wondering why we parse the data in such a weird way.
+  // This was the smartest I way I came up that did not require introducing additional span attribute validation logic on the gateway.
+  // We want to avoid inserts failing due to a column type-mismatch at any chance, since we are doing batch inserts and one fault record
+  // could prevent all other inserts within the same batch from happening.
+  //
+  // The idea here is to attempt verifying that the input is "array"-like and if so parse it as safe as possible.
+  // If the input is not "array"-like we just insert an empty array and move on.
+  //
+  // Later on, we could think about actually rejecting incorrect span values on the otel-collector business logic.
+  //
+  // ```
+  // if(
+  //   JSONType(toString("SpanAttributes"['hive.graphql.error.codes'])) = 'Array',
+  //   arrayFilter(
+  //     -- Filter out empty values
+  //     x -> notEquals(x, ''),
+  //     arrayMap(
+  //       -- If the user provided something non-stringy, this returns '', which is fine imho
+  //       x -> JSONExtractString(x),
+  //       JSONExtractArrayRaw(toString("SpanAttributes"['hive.graphql.error.codes']))
+  //     )
+  //   ),
+  //   []
+  //  )
+  // ```
+
   await exec(`
     CREATE MATERIALIZED VIEW IF NOT EXISTS "otel_traces_normalized_mv" TO "otel_traces_normalized" (
       "target_id" LowCardinality(String)
@@ -165,25 +191,37 @@ export const action: Action = async exec => {
         , "SpanAttributes"['http.url'] AS "http_url"
         , "SpanAttributes"['hive.client.name'] AS "client_name"
         , "SpanAttributes"['hive.client.version'] AS "client_version"
-        , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
-        , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
-        , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['graphql.operation.name'] AS "graphql_operation_name"
+        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
+        , "SpanAttributes"['graphql.document'] AS "graphql_operation_document"
         , "SpanAttributes"['hive.graphql.operation.hash'] AS "graphql_operation_hash"
         , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
         , if(
-            "SpanAttributes"['hive.graphql.error.codes'] = '',
-            [],
-            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes']))
+            JSONType(toString("SpanAttributes"['hive.graphql.error.codes'])) = 'Array',
+            arrayFilter(
+              x -> notEquals(x, ''),
+              arrayMap(
+                x -> JSONExtractString(x),
+                JSONExtractArrayRaw(toString("SpanAttributes"['hive.graphql.error.codes']))
+              )
+            ),
+            []
           ) AS "graphql_error_codes"
         , if(
-            "SpanAttributes"['hive.subgraph.names'] = '',
-            [],
-            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.subgraph.names']))
+            JSONType(toString("SpanAttributes"['hive.gateway.operation.subgraph.names'])) = 'Array',
+            arrayFilter(
+              x -> notEquals(x, ''),
+              arrayMap(
+                x -> JSONExtractString(x),
+                JSONExtractArrayRaw(toString("SpanAttributes"['hive.gateway.operation.subgraph.names']))
+              )
+            ),
+            []
           ) AS "subgraph_names"
       FROM
         "otel_traces"
       WHERE
-        empty("ParentSpanId") AND NOT empty("SpanAttributes"['hive.graphql.operation.type'])
+        empty("ParentSpanId") AND NOT empty("SpanAttributes"['graphql.operation.type'])
     )
   `);
 
@@ -253,14 +291,20 @@ export const action: Action = async exec => {
         , "SpanAttributes"['http.url'] AS "http_url"
         , "SpanAttributes"['hive.client.name'] AS "client_name"
         , "SpanAttributes"['hive.client.version'] AS "client_version"
-        , "SpanAttributes"['hive.graphql.operation.name'] AS "graphql_operation_name"
-        , toLowCardinality("SpanAttributes"['hive.graphql.operation.type']) AS "graphql_operation_type"
-        , "SpanAttributes"['hive.graphql.operation.document'] AS "graphql_operation_document"
+        , "SpanAttributes"['graphql.operation.name'] AS "graphql_operation_name"
+        , toLowCardinality("SpanAttributes"['graphql.operation.type']) AS "graphql_operation_type"
+        , "SpanAttributes"['graphql.document'] AS "graphql_operation_document"
         , toInt64OrZero("SpanAttributes"['hive.graphql.error.count']) AS "graphql_error_count"
         , if(
-            "SpanAttributes"['hive.graphql.error.codes'] = '',
-            [],
-            arrayMap(x -> toLowCardinality(x), splitByChar(',', "SpanAttributes"['hive.graphql.error.codes']))
+            JSONType(toString("SpanAttributes"['hive.graphql.error.codes'])) = 'Array',
+            arrayFilter(
+              x -> notEquals(x, ''),
+              arrayMap(
+                x -> JSONExtractString(x),
+                JSONExtractArrayRaw(toString("SpanAttributes"['hive.graphql.error.codes']))
+              )
+            ),
+            []
           ) AS "graphql_error_codes"
       FROM
         "otel_traces"
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index e9e457100f..3824b665b9 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -457,7 +457,8 @@ function SpanNode(props: SpanNodeProps) {
 
   const isDimmed =
     (typeof props.highlightedServiceName === 'string' &&
-      props.highlightedServiceName !== span.spanAttributes['gateway.upstream.subgraph.name']) ||
+      props.highlightedServiceName !==
+        span.spanAttributes['hive.gateway.upstream.subgraph.name']) ||
     (activeSpanId && activeSpanId !== span.id) ||
     (highlightedEvent && highlightedEvent.spanId !== span.id);
 
@@ -518,9 +519,9 @@ function SpanNode(props: SpanNodeProps) {
                 </Badge>
               )}
             </div>
-            {span.spanAttributes['gateway.upstream.subgraph.name'] ? (
+            {span.spanAttributes['hive.gateway.upstream.subgraph.name'] ? (
               <div className={cn('truncate text-xs', isDimmed ? 'text-gray-600' : 'text-gray-500')}>
-                {span.spanAttributes['gateway.upstream.subgraph.name']}
+                {span.spanAttributes['hive.gateway.upstream.subgraph.name']}
               </div>
             ) : null}
           </div>
@@ -686,7 +687,7 @@ function SpanNode(props: SpanNodeProps) {
               const uchildSpan = useFragment(SpanFragment, childSpan.span);
 
               const serviceName: string | null =
-                uchildSpan.spanAttributes['gateway.upstream.subgraph.name'] ??
+                uchildSpan.spanAttributes['hive.gateway.upstream.subgraph.name'] ??
                 props.serviceName ??
                 null;
 
diff --git a/scripts/seed-traces/sample-introspection.json b/scripts/seed-traces/sample-introspection.json
index bc0876473f..0c5e8f02c5 100644
--- a/scripts/seed-traces/sample-introspection.json
+++ b/scripts/seed-traces/sample-introspection.json
@@ -450,13 +450,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "IntrospectionQuery"
                     }
diff --git a/scripts/seed-traces/sample-my-profile.json b/scripts/seed-traces/sample-my-profile.json
index 1e36fb22fc..6a29f4f0fd 100644
--- a/scripts/seed-traces/sample-my-profile.json
+++ b/scripts/seed-traces/sample-my-profile.json
@@ -293,13 +293,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "MyProfile"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -453,13 +453,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "MyProfile"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -613,13 +613,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "MyProfile"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -765,19 +765,19 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.names",
+                    "key": "hive.gateway.operation.subgraph.names",
                     "value": {
                       "stringValue": "users,reviews,products"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "MyProfile"
                     }
diff --git a/scripts/seed-traces/sample-products-overview.json b/scripts/seed-traces/sample-products-overview.json
index 954fdde797..1591a1bfc2 100644
--- a/scripts/seed-traces/sample-products-overview.json
+++ b/scripts/seed-traces/sample-products-overview.json
@@ -293,13 +293,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "TopProductsOverview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -453,13 +453,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "TopProductsOverview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -613,13 +613,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "TopProductsOverview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -765,19 +765,19 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.names",
+                    "key": "hive.gateway.operation.subgraph.names",
                     "value": {
                       "stringValue": "products,reviews,users"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "TopProductsOverview"
                     }
diff --git a/scripts/seed-traces/sample-user-review-error-missing-variables.json b/scripts/seed-traces/sample-user-review-error-missing-variables.json
index 0661ca6047..a58cb80dbf 100644
--- a/scripts/seed-traces/sample-user-review-error-missing-variables.json
+++ b/scripts/seed-traces/sample-user-review-error-missing-variables.json
@@ -269,13 +269,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
diff --git a/scripts/seed-traces/sample-user-review-not-found.json b/scripts/seed-traces/sample-user-review-not-found.json
index 59c8ace87c..6823e695b7 100644
--- a/scripts/seed-traces/sample-user-review-not-found.json
+++ b/scripts/seed-traces/sample-user-review-not-found.json
@@ -293,13 +293,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -445,19 +445,19 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.names",
+                    "key": "hive.gateway.operation.subgraph.names",
                     "value": {
                       "stringValue": "users"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
diff --git a/scripts/seed-traces/sample-user-review.json b/scripts/seed-traces/sample-user-review.json
index 38c16e1c5e..9d201494a1 100644
--- a/scripts/seed-traces/sample-user-review.json
+++ b/scripts/seed-traces/sample-user-review.json
@@ -293,13 +293,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -453,13 +453,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -613,13 +613,13 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
@@ -765,19 +765,19 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.names",
+                    "key": "hive.gateway.operation.subgraph.names",
                     "value": {
                       "stringValue": "users,reviews,products"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.type",
+                    "key": "graphql.operation.type",
                     "value": {
                       "stringValue": "query"
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.name",
+                    "key": "graphql.operation.name",
                     "value": {
                       "stringValue": "UserReview"
                     }
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 35427ff824..f78f270adf 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -467,19 +467,19 @@ const reference = [
                     },
                   },
                   {
-                    key: 'hive.graphql.operation.type',
+                    key: 'graphql.operation.type',
                     value: {
                       stringValue: 'query',
                     },
                   },
                   {
-                    key: 'hive.graphql.operation.name',
+                    key: 'graphql.operation.name',
                     value: {
                       stringValue: 'IntrospectionQuery',
                     },
                   },
                   {
-                    key: 'hive.graphql.operation.document',
+                    key: 'graphql.document',
                     value: {
                       stringValue:
                         'query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}',

From fa0dcd1359e268565cd36a9d7c84cd289a90ed9a Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 19 Sep 2025 15:31:43 +0200
Subject: [PATCH 068/123] handle faulty graphql operation traces

---
 configs/gateway.config.ts                     | 247 +-----------------
 .../src/clickhouse-actions/015-otel-trace.ts  |   2 +-
 .../src/modules/operations/module.graphql.ts  |   4 +-
 .../modules/operations/providers/traces.ts    |  10 +-
 .../src/modules/operations/resolvers/Trace.ts |   2 +
 packages/web/app/src/pages/target-trace.tsx   |   2 +-
 packages/web/app/src/pages/target-traces.tsx  |  10 +-
 7 files changed, 30 insertions(+), 247 deletions(-)

diff --git a/configs/gateway.config.ts b/configs/gateway.config.ts
index 090111056d..71b220b4c0 100644
--- a/configs/gateway.config.ts
+++ b/configs/gateway.config.ts
@@ -1,240 +1,17 @@
-/**
- * Hive Gateway Config with a Hive Console Specific Span Processor.
- *
- * ```sh
- * docker run --name hive-gateway --rm -p 4000:4000 \
- *   -v $(pwd)/configs/gateway.config.ts:/gateway/gateway.config.ts \
- *   -e HIVE_ORGANIZATION_ACCESS_TOKEN="<organization_access_key>"
- *   -e HIVE_TARGET_REF="<target_ref>"
- *   -e DEBUG=1
- *   ghcr.io/graphql-hive/gateway:1.14.3-alpha-cf354599f0bca73b6f8b010a6747e42a17ef20d7 supergraph \
- *   "http://host.docker.internal:3001/artifacts/v1/<target_id>" \
- *   --hive-cdn-key '<cdn_key>'
- * ````
- */
-import { createOtlpHttpExporter, defineConfig, GatewayPlugin } from '@graphql-hive/gateway';
-import type { MeshFetchRequestInit } from '@graphql-mesh/types';
-import { Span, SpanProcessor } from '@opentelemetry/sdk-trace-base';
-
-// The following plugin is used to trace the fetch calls made by Mesh.
-const useOnFetchTracer = (): GatewayPlugin => {
-  const upstreamCallHeaders: Array<{
-    url: string;
-    headers: MeshFetchRequestInit['headers'];
-  }> = [];
-
-  return {
-    onFetch({ url, options }) {
-      upstreamCallHeaders.push({ url, headers: options.headers });
-    },
-    // onSubgraphExecute({ executionRequest, requestId, subgraphName, ...res }) {
-    //   return async function onSubgraphExecuteDone({ result }) {
-    //     const span = trace.getSpan(executionRequest.context.opentelemetry.activeContext());
-    //     console.log('DUDUDUDUDUDUDUD', span);
-    //   };
-    // },
-    onRequest({ request, url, endResponse, fetchAPI }) {
-      if (url.pathname === '/upstream-fetch' && request.method === 'GET') {
-        endResponse(fetchAPI.Response.json(upstreamCallHeaders));
-        return;
-      }
-    },
-    onExecute({ context }) {
-      const span: Span | undefined = context.opentelemetry
-        .activeContext()
-        ._currentContext.values()
-        .next().value;
-
-      if (!span) {
-        return;
-      }
-      return {
-        onExecuteDone(ctx) {
-          const errors = new Set<string>();
-          if (ctx.result?.errors) {
-            for (const err of ctx.result.errors) {
-              if (err.extensions?.code && typeof err.extensions.code === 'string') {
-                errors.add(err.extensions.code);
-              }
-            }
-          }
-          if (errors.size) {
-            span.setAttribute('hive.graphql.error.codes', Array.from(errors).join(','));
-          }
-        },
-      };
-    },
-  };
-};
-
-class HiveTracingSpanProcessor implements SpanProcessor {
-  private activeSpans: Map<string, Map<string, Span>> = new Map();
-  private rootSpanIds: Map<string, string> = new Map();
-  private subgraphNames: Map<string, Set<string>> = new Map();
-
-  onStart(span: Span): void {
-    const spanContext = span.spanContext();
-    const traceId = spanContext.traceId;
-    const spanId = spanContext.spanId;
-
-    console.log(traceId, spanId, span.name);
-
-    // Initialize trace data structures if needed
-    if (!this.activeSpans.has(traceId)) {
-      this.activeSpans.set(traceId, new Map());
-    }
-    if (!this.subgraphNames.has(traceId)) {
-      this.subgraphNames.set(traceId, new Set());
-    }
-
-    this.activeSpans.get(traceId)!.set(spanId, span);
-
-    // If this is a root span (no parent), mark it as the root span for this trace
-    // if (!span.parentSpanId) {
-    if (!span.parentSpanContext?.spanId) {
-      this.rootSpanIds.set(traceId, spanId);
-    }
-
-    // Check if this is a subgraph execution span
-    if (span.name && span.name.startsWith('subgraph.execute')) {
-      const subgraphName = span.attributes['gateway.upstream.subgraph.name'];
-      if (subgraphName && typeof subgraphName === 'string') {
-        this.subgraphNames.get(traceId)!.add(subgraphName);
-      }
-    }
-  }
-
-  onEnd(span: Span): void {
-    const spanContext = span.spanContext();
-    const traceId = spanContext.traceId;
-    const spanId = spanContext.spanId;
-
-    // Skip if we don't have this trace
-    if (!this.activeSpans.has(traceId)) {
-      return;
-    }
-
-    const spansForTrace = this.activeSpans.get(traceId)!;
-    const rootSpanId = this.rootSpanIds.get(traceId);
-    const subgraphNamesForTrace = this.subgraphNames.get(traceId);
-
-    // Check if this is the GraphQL execute span we're interested in
-    // TODO: can we have this fully type safe?
-    if (span.name === 'graphql.execute') {
-      const operationType = span.attributes['graphql.operation.type'];
-      const operationName = span.attributes['graphql.operation.name'];
-      const errorCount = span.attributes['graphql.error.count'];
-      const document = span.attributes['graphql.document'];
-
-      if (rootSpanId) {
-        const rootSpan = spansForTrace.get(rootSpanId);
-        if (rootSpan && !rootSpan.ended) {
-          // Update the name of the root span
-          if (operationType && document) {
-            rootSpan.updateName(`${operationType} ${operationName}`);
-
-            // Copy attributes to root span
-            rootSpan.setAttribute('graphql.operation.type', operationType);
-            rootSpan.setAttribute('graphql.operation.name', operationName ?? '');
-            rootSpan.setAttribute('graphql.operation.document', document);
-            rootSpan.setAttribute('hive.graphql.error.count', errorCount ?? 0);
-            rootSpan.setAttribute('hive.graphql.operation.hash', 'FOFOFOFOFOFOFOFOF');
-
-            // Add the subgraph names as a comma-separated list
-            if (subgraphNamesForTrace && subgraphNamesForTrace.size > 0) {
-              rootSpan.setAttribute(
-                'hive.subgraph.names',
-                Array.from(subgraphNamesForTrace).join(','),
-              );
-            }
-          }
-        }
-      }
-    }
-
-    // For any subgraph span that's ending, make sure we capture its name
-    if (span.name && span.name.startsWith('subgraph.execute')) {
-      const subgraphName = span.attributes['gateway.upstream.subgraph.name'];
-
-      if (subgraphName && typeof subgraphName === 'string' && subgraphNamesForTrace) {
-        subgraphNamesForTrace.add(subgraphName);
-
-        // Update root span with current list of subgraph names
-        if (rootSpanId) {
-          const rootSpan = spansForTrace.get(rootSpanId);
-          if (rootSpan && !rootSpan.ended) {
-            rootSpan.setAttribute(
-              'hive.subgraph.names',
-              Array.from(subgraphNamesForTrace).join(','),
-            );
-          }
-        }
-      }
-
-      // add hive branded attributes
-      //
-      span.attributes['hive.subgraph.name'] = span.attributes['gateway.upstream.subgraph.name'];
-      span.attributes['graphql.operation.document'] = span.attributes['graphql.document'];
-      span.attributes['graphql.operation.name'] = span.attributes['graphql.operation.name'];
-      span.attributes['graphql.operation.type'] = span.attributes['graphql.operation.type'];
-      // TODO: attributes for error codes
-      // hive.graphql.error.count
-      // span.attributes['hive.graphql.error.count'] = 0;
-      // hive.graphql.error.codes
-      // span.setAttribute('hive.graphql.error.codes', '');
-      //
-    }
-
-    // Clean up the span reference
-    spansForTrace.delete(spanId);
-
-    // If this is the root span or if no spans remain, clean up the trace
-    if (rootSpanId === spanId || spansForTrace.size === 0) {
-      this.activeSpans.delete(traceId);
-      this.rootSpanIds.delete(traceId);
-      this.subgraphNames.delete(traceId);
-      if (process.env.DEBUG === '1') {
-        console.log('span attributes', span.attributes);
-      }
-    }
-  }
-
-  async forceFlush(): Promise<void> {
-    // Clear all processor state
-    this.activeSpans.clear();
-    this.rootSpanIds.clear();
-    this.subgraphNames.clear();
-  }
-
-  async shutdown(): Promise<void> {
-    // Clean up resources when shutting down
-    await this.forceFlush();
-  }
-}
-async function createHiveTracingSpanProcessor(): Promise<HiveTracingSpanProcessor> {
-  return new HiveTracingSpanProcessor();
-}
+import { defineConfig } from '@graphql-hive/gateway';
+import { hiveTracingSetup } from '@graphql-hive/plugin-opentelemetry/setup';
+import { AsyncLocalStorageContextManager } from '@opentelemetry/context-async-hooks'; // install
+
+hiveTracingSetup({
+  contextManager: new AsyncLocalStorageContextManager(),
+  target: process.env.HIVE_TRACING_TARGET!,
+  accessToken: process.env.HIVE_TRACING_ACCESS_TOKEN!,
+  // optional, for self-hosting
+  endpoint: process.env.HIVE_TRACING_ENDPOINT!,
+});
 
 export const gatewayConfig = defineConfig({
   openTelemetry: {
-    contextManager: false,
-    exporters: [
-      createHiveTracingSpanProcessor(),
-      createOtlpHttpExporter(
-        {
-          url: 'http://host.docker.internal:4318/v1/traces',
-          headers: {
-            Authorization: `Bearer ${process.env.HIVE_ORGANIZATION_ACCESS_TOKEN}`,
-            'X-Hive-Target-Ref': process.env.HIVE_TARGET_REF,
-          },
-        },
-        // Batching config is set in order to make it easier to test.
-        {
-          scheduledDelayMillis: 1,
-        },
-      ),
-    ],
-    serviceName: 'hive-gateway',
+    traces: true,
   },
-  plugins: () => [useOnFetchTracer()],
 });
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index b66ca8176b..24320bee12 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -221,7 +221,7 @@ export const action: Action = async exec => {
       FROM
         "otel_traces"
       WHERE
-        empty("ParentSpanId") AND NOT empty("SpanAttributes"['graphql.operation.type'])
+        empty("ParentSpanId")
     )
   `);
 
diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 6a26b53a6d..3408f53cd3 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -273,7 +273,7 @@ export default gql`
     id: ID!
     timestamp: DateTime!
     operationName: String
-    operationType: GraphQLOperationType!
+    operationType: GraphQLOperationType
     """
     The Hash of the GraphQL operation.
     """
@@ -285,7 +285,7 @@ export default gql`
     """
     The subgraphs called within the trace.
     """
-    subgraphs: [String!]!
+    subgraphs: [String!]
     """
     Wether the trace is successful.
     A trace is a success if no GraphQL errors occured and the HTTP status code is in the 2XX to 3XX range.
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index bc5284294b..d943766c9d 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -270,6 +270,7 @@ const traceFields = sql`
   , "client_name" AS "clientName"
   , "client_version" AS "clientVersion"
   , upper("graphql_operation_type") AS "graphqlOperationType"
+  , "graphql_error_count" AS "graphqlErrorCount"
   , "graphql_error_codes" AS "graphqlErrorCodes"
   , "subgraph_names" AS "subgraphNames"
 `;
@@ -289,15 +290,14 @@ const TraceModel = z.object({
     .string()
     .nullable()
     .transform(value => value || null),
-  graphqlOperationType: z.union([
-    z.literal('QUERY'),
-    z.literal('MUTATION'),
-    z.literal('SUBSCRIPTION'),
-  ]),
+  graphqlOperationType: z
+    .union([z.literal('QUERY'), z.literal('MUTATION'), z.literal('SUBSCRIPTION'), z.literal('')])
+    .transform(value => value || null),
   graphqlOperationHash: z.string().nullable(),
   clientName: z.string().nullable(),
   clientVersion: z.string().nullable(),
   graphqlErrorCodes: z.array(z.string()).nullable(),
+  graphqlErrorCount: z.number(),
   subgraphNames: z.array(z.string()).transform(s => (s.length === 1 && s.at(0) === '' ? [] : s)),
 });
 
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
index a4778991c0..66aeb241cf 100644
--- a/packages/services/api/src/modules/operations/resolvers/Trace.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -37,8 +37,10 @@ export const Trace: TraceResolvers = {
     return trace.subgraphNames;
   },
   success(trace) {
+    console.log('BRRR BRRR', trace);
     return (
       (trace.graphqlErrorCodes?.length ?? 0) === 0 &&
+      trace.graphqlErrorCount === 0 &&
       (trace.httpStatusCode.startsWith('2') || trace.httpStatusCode.startsWith('3'))
     );
   },
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 3824b665b9..18cbdebca8 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -957,7 +957,7 @@ export function TraceSheet(props: TraceSheetProps) {
                           fontSize: 10,
                           minimap: { enabled: false },
                         }}
-                        code={rootSpanUnmasked.spanAttributes['hive.graphql.operation.document']}
+                        code={rootSpanUnmasked.spanAttributes['graphql.document']}
                       />
                     </div>
                   ) : null}
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index f062f7a02e..e0353f90d1 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -425,9 +425,13 @@ const TracesList = memo(function TracesList(
               <TooltipTrigger asChild>
                 <div className="flex items-center gap-2 px-4 text-xs">
                   <span className="bg-muted text-muted-foreground inline-flex items-center rounded-sm px-1 py-0.5 uppercase">
-                    {row.original.operationType.substring(0, 1).toUpperCase()}
+                    {row.original.operationType?.substring(0, 1).toUpperCase() ?? 'U'}
+                  </span>
+                  <span>
+                    {row.getValue('operationName') ?? (
+                      <span className="text-gray-400">{'<unknown>'}</span>
+                    )}
                   </span>
-                  <span>{row.getValue('operationName')}</span>
                 </div>
               </TooltipTrigger>
               <TooltipContent
@@ -923,7 +927,7 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
         <SheetHeader className="relative border-b border-gray-800 p-4">
           <div className="flex items-center justify-between">
             <SheetTitle className="text-lg font-medium text-white">
-              {trace?.operationName}
+              {trace?.operationName ?? <span className="text-gray-400">{'<unknown>'}</span>}
               <span className="text-muted-foreground ml-2 font-mono font-normal">
                 {trace.id.substring(0, 4)}
               </span>

From c86e430f0bffa779681ce44ec9fa72657f61339e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 19 Sep 2025 15:54:28 +0200
Subject: [PATCH 069/123] some margin

---
 packages/web/app/src/pages/target-trace.tsx | 22 +++++++++------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 18cbdebca8..f63c5cc3cf 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -936,6 +936,7 @@ export function TraceSheet(props: TraceSheetProps) {
                             onMouseLeave={() => {
                               setHighlightedEvent(null);
                             }}
+                            className="mb-2 block"
                           >
                             <ExceptionTeaser
                               key={event.id}
@@ -1524,20 +1525,15 @@ function SpanSheet(props: SpanSheetProps) {
                     <div className="px-1 pt-2">
                       {span.events.map(event => {
                         return (
-                          <ExceptionTeaser
-                            type={event.attributes['exception.type'] ?? ''}
-                            message={event.attributes['exception.message'] ?? ''}
-                            stacktrace={event.attributes['exception.stacktrace'] ?? ''}
-                            name={event.name}
-                          />
+                          <div className="mb-2">
+                            <ExceptionTeaser
+                              type={event.attributes['exception.type'] ?? ''}
+                              message={event.attributes['exception.message'] ?? ''}
+                              stacktrace={event.attributes['exception.stacktrace'] ?? ''}
+                              name={event.name}
+                            />
+                          </div>
                         );
-                        // return (
-                        //   <>
-                        //     {Array.from(Object.entries(event.attributes)).map(([key, value]) => (
-                        //       <AttributeRow key={key} attributeKey={key} value={String(value)} />
-                        //     ))}
-                        //   </>
-                        // );
                       })}
                     </div>
                   ) : (

From 8af7ee9115fc4de0b7303cb0799d1e27a345e226 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 19 Sep 2025 16:02:48 +0200
Subject: [PATCH 070/123] nicer unknown value formatting

---
 packages/web/app/src/pages/target-traces.tsx | 38 ++++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index e0353f90d1..90b5dce496 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -651,23 +651,6 @@ function LabelWithColor(props: { className: string; children: ReactNode }) {
   );
 }
 
-// function LabelWithBadge(props: {
-//   children: ReactNode;
-//   badgeText: string;
-//   side?: 'left' | 'right';
-// }) {
-//   return (
-//     <div
-//       className={cn('flex items-center gap-1', props.side === 'right' ? 'flex-row-reverse' : '')}
-//     >
-//       <Badge variant="outline" className="rounded-sm px-1 font-normal">
-//         {props.badgeText}
-//       </Badge>
-//       <span className="text-foreground font-medium">{props.children}</span>
-//     </div>
-//   );
-// }
-
 export const TargetTracesFilterState = z.object({
   period: z.union([z.tuple([z.string(), z.string()]), z.tuple([])]).default([]),
   duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
@@ -1123,14 +1106,24 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         options?.operationType.map(option => ({
           value: option.value,
           searchContent: option.value,
-          label: option.value,
+          label:
+            option.value === '' ? (
+              <span className="text-gray-400">{'<unknown>'}</span>
+            ) : (
+              option.value
+            ),
           count: option.count,
         })) ?? [],
       'graphql.name':
         options?.operationName.map(option => ({
           value: option.value,
           searchContent: option.value,
-          label: option.value,
+          label:
+            option.value === '' ? (
+              <span className="text-gray-400">{'<unknown>'}</span>
+            ) : (
+              option.value
+            ),
           count: option.count,
         })) ?? [],
       'http.status':
@@ -1186,7 +1179,12 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         options?.clientName.map(option => ({
           value: option.value,
           searchContent: option.value,
-          label: option.value,
+          label:
+            option.value === '' ? (
+              <span className="text-gray-400">{'<unknown>'}</span>
+            ) : (
+              option.value
+            ),
           count: option.count,
         })) ?? [],
     };

From 72a68826d1d059ec9da4bf1e6b7361a3b5e5f91f Mon Sep 17 00:00:00 2001
From: Dotan Simha <dotansimha@gmail.com>
Date: Sun, 21 Sep 2025 14:07:12 +0300
Subject: [PATCH 071/123] enable otel-collector self-reporting metrics and
 scraping

---
 docker/configs/otel-collector/config.yaml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 349d17450b..26d01b6e83 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -61,6 +61,8 @@ service:
       encoding: json
       output_paths: ['stdout']
       error_output_paths: ['stderr']
+    metrics:
+      address: '0.0.0.0:10254'
   pipelines:
     traces:
       receivers: [otlp]

From 6b55f67c57c373dc3c3f0f1c65bdb58f7e769e8e Mon Sep 17 00:00:00 2001
From: Dotan Simha <dotansimha@gmail.com>
Date: Sun, 21 Sep 2025 14:13:40 +0300
Subject: [PATCH 072/123] added memory limiter

---
 deployment/services/environment.ts        | 5 +++++
 deployment/services/otel-collector.ts     | 8 ++++++++
 docker/configs/otel-collector/config.yaml | 5 +++++
 3 files changed, 18 insertions(+)

diff --git a/deployment/services/environment.ts b/deployment/services/environment.ts
index 6f0982fbd7..24c0134813 100644
--- a/deployment/services/environment.ts
+++ b/deployment/services/environment.ts
@@ -79,6 +79,11 @@ export function prepareEnvironment(input: {
         cpuLimit: isProduction ? '512m' : '150m',
         memoryLimit: isProduction ? '1000Mi' : '300Mi',
       },
+      tracingCollector: {
+        cpuLimit: isProduction ? '1000m' : '100m',
+        memoryLimit: isProduction ? '1000Mi' : '200Mi',
+        maxReplicas: isProduction || isStaging ? 2 : 1,
+      },
     },
   };
 }
diff --git a/deployment/services/otel-collector.ts b/deployment/services/otel-collector.ts
index b8a587e51e..f00cb0a33c 100644
--- a/deployment/services/otel-collector.ts
+++ b/deployment/services/otel-collector.ts
@@ -41,6 +41,14 @@ export function deployOTELCollector(args: {
       pdb: true,
       availabilityOnEveryNode: true,
       port: 4318,
+      memoryLimit: args.environment.podsConfig.tracingCollector.memoryLimit,
+      autoScaling: {
+        maxReplicas: args.environment.podsConfig.tracingCollector.maxReplicas,
+        cpu: {
+          limit: args.environment.podsConfig.tracingCollector.cpuLimit,
+          cpuAverageToScale: 80,
+        },
+      },
     },
     [args.clickhouse.deployment, args.clickhouse.service, args.dbMigrations],
   )
diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 26d01b6e83..97bd89c69d 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -28,6 +28,10 @@ processors:
       - key: hive.target_id
         from_context: auth.targetId
         action: insert
+  memory_limiter:
+    check_interval: 1s
+    limit_percentage: 80
+    spike_limit_percentage: 20
 exporters:
   debug:
     verbosity: detailed
@@ -69,6 +73,7 @@ service:
       processors:
         - attributes
         - batch
+        - memory_limiter
       exporters:
         - clickhouse
         - debug

From 262f5839572fb7182a372613c9eac3f76315b09f Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 11:01:51 +0200
Subject: [PATCH 073/123] allow unknown oepration type filtering

---
 .../api/src/modules/operations/module.graphql.ts         | 4 +++-
 .../api/src/modules/operations/providers/traces.ts       | 9 +++++++--
 .../api/src/modules/operations/resolvers/Target.ts       | 7 ++++++-
 .../api/src/modules/operations/resolvers/Trace.ts        | 1 -
 packages/web/app/src/pages/target-traces.tsx             | 4 ++--
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 3408f53cd3..79b8893fed 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -362,8 +362,10 @@ export default gql`
     operationNames: [String!]
     """
     Filter based on the operation type.
+
+    A value of 'null' value indicates a unknown operation type.
     """
-    operationTypes: [GraphQLOperationType!]
+    operationTypes: [GraphQLOperationType]
     """
     Filter based on the client name.
     """
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index d943766c9d..eb787a6dae 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -315,7 +315,7 @@ type TraceFilter = {
   success: ReadonlyArray<boolean> | null;
   errorCodes: ReadonlyArray<string> | null;
   operationNames: ReadonlyArray<string> | null;
-  operationTypes: ReadonlyArray<string> | null;
+  operationTypes: ReadonlyArray<string | null> | null;
   clientNames: ReadonlyArray<string> | null;
   subgraphNames: ReadonlyArray<string> | null;
   httpStatusCodes: ReadonlyArray<string> | null;
@@ -375,7 +375,12 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false)
   }
 
   if (filter?.operationTypes?.length) {
-    ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
+    ANDs.push(
+      sql`"graphql_operation_type" IN (${sql.array(
+        filter.operationTypes.map(value => (value == null ? '' : value.toLowerCase())),
+        'String',
+      )})`,
+    );
   }
 
   if (filter?.clientNames?.length) {
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 0ce40f2fcb..83c674f92c 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -136,7 +136,12 @@ export const Target: Pick<
     }
 
     if (filter?.operationTypes?.length) {
-      ANDs.push(sql`"graphql_operation_type" IN (${sql.array(filter.operationTypes, 'String')})`);
+      ANDs.push(
+        sql`"graphql_operation_type" IN (${sql.array(
+          filter.operationTypes.map(value => (value == null ? '' : value.toLowerCase())),
+          'String',
+        )})`,
+      );
     }
 
     if (filter?.clientNames?.length) {
diff --git a/packages/services/api/src/modules/operations/resolvers/Trace.ts b/packages/services/api/src/modules/operations/resolvers/Trace.ts
index 66aeb241cf..9a31a85ebf 100644
--- a/packages/services/api/src/modules/operations/resolvers/Trace.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Trace.ts
@@ -37,7 +37,6 @@ export const Trace: TraceResolvers = {
     return trace.subgraphNames;
   },
   success(trace) {
-    console.log('BRRR BRRR', trace);
     return (
       (trace.graphqlErrorCodes?.length ?? 0) === 0 &&
       trace.graphqlErrorCount === 0 &&
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 90b5dce496..3e199d01b4 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -656,7 +656,7 @@ export const TargetTracesFilterState = z.object({
   duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
   'trace.id': z.array(z.string()).default([]),
   'graphql.status': z.array(z.string()).default([]),
-  'graphql.kind': z.array(z.string()).default([]),
+  'graphql.kind': z.array(z.string().nullable()).default([]),
   'graphql.subgraph': z.array(z.string()).default([]),
   'graphql.operation': z.array(z.string()).default([]),
   'graphql.client': z.array(z.string()).default([]),
@@ -1104,7 +1104,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         })) ?? [],
       'graphql.kind':
         options?.operationType.map(option => ({
-          value: option.value,
+          value: option.value === '' ? null : option.value.toUpperCase(),
           searchContent: option.value,
           label:
             option.value === '' ? (

From 4c3e81fafb9b402eaf578471bb0bb20f0d35002f Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 13:07:37 +0200
Subject: [PATCH 074/123] wip: laod test

---
 load-tests/otel-traces/README.md    |  27 ++++
 load-tests/otel-traces/package.json |   7 +
 load-tests/otel-traces/test.ts      | 217 ++++++++++++++++++++++++++++
 pnpm-lock.yaml                      |  49 ++++---
 pnpm-workspace.yaml                 |   1 +
 scripts/seed-traces/seed-traces.mts |   2 +-
 6 files changed, 283 insertions(+), 20 deletions(-)
 create mode 100644 load-tests/otel-traces/README.md
 create mode 100644 load-tests/otel-traces/package.json
 create mode 100644 load-tests/otel-traces/test.ts

diff --git a/load-tests/otel-traces/README.md b/load-tests/otel-traces/README.md
new file mode 100644
index 0000000000..0e04d8e99a
--- /dev/null
+++ b/load-tests/otel-traces/README.md
@@ -0,0 +1,27 @@
+# OTEL Trace Stress Test
+
+The purpose of this script is to see how our infrastructure responds to high loads and cardinality.
+
+The affected components are:
+
+- otel trace collector
+- clickhouse (cloud)
+
+## Running the script
+
+The following environment variabels are required
+
+```
+OTEL_ENDPOINT
+HIVE_ORGANIZATION_ACCESS_TOKEN
+HIVE_TARGET_REF
+```
+
+**Example:**
+
+```sh
+OTEL_ENDPOINT=https://api.hiveready.dev/otel/v1/traces \
+  HIVE_ORGANIZATION_ACCESS_TOKEN="<REPLACE ME>" \
+  HIVE_TARGET_REF="the-guild/hive/dev" \
+  k6 run load-tests/otel-traces/test.ts
+```
diff --git a/load-tests/otel-traces/package.json b/load-tests/otel-traces/package.json
new file mode 100644
index 0000000000..2fee0962f6
--- /dev/null
+++ b/load-tests/otel-traces/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "loade-test-otel-traces",
+  "private": true,
+  "devDependencies": {
+    "@types/k6": "1.2.0"
+  }
+}
diff --git a/load-tests/otel-traces/test.ts b/load-tests/otel-traces/test.ts
new file mode 100644
index 0000000000..64edba24c7
--- /dev/null
+++ b/load-tests/otel-traces/test.ts
@@ -0,0 +1,217 @@
+import { randomIntBetween, randomString } from 'https://jslib.k6.io/k6-utils/1.2.0/index.js';
+import * as immer from 'https://unpkg.com/immer@10.1.3/dist/immer.mjs';
+import http from 'k6/http';
+
+// Cardinality Variables Start
+const countUniqueErrorCodes = 1_000;
+const countUniqueClients = 1_000;
+const appVersionsPerClient = 1_000;
+// Cardinality Variables End
+
+const otelEndpointUrl = __ENV.OTEL_ENDPOINT || 'http://localhost:4318/v1/traces';
+console.log(
+  `Endpoint: ${otelEndpointUrl}. (Overwrite using the OTEL_ENDPOINT environment variable)`,
+);
+
+const HIVE_ORGANIZATION_ACCESS_TOKEN = __ENV.HIVE_ORGANIZATION_ACCESS_TOKEN;
+if (!HIVE_ORGANIZATION_ACCESS_TOKEN) {
+  throw new Error('Environment variable HIVE_ORGANIZATION_ACCESS_TOKEN is missing.');
+}
+
+const HIVE_TARGET_REF = __ENV.HIVE_TARGET_REF;
+if (!HIVE_TARGET_REF) {
+  throw new Error('Environment variable HIVE_TARGET_REF is missing.');
+}
+
+// A helper to generate a random 16-byte trace/span ID in hex
+function randomId(bytes: number = 32): string {
+  const chars = 'abcdef0123456789';
+  let out = '';
+  for (let i = 0; i < bytes * 2; i++) {
+    out += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return out;
+}
+
+function toTimeUnixNano(date = new Date()) {
+  const milliseconds = date.getTime(); // ms since epoch
+  const nanoseconds = BigInt(milliseconds) * 1_000_000n; // ns = ms × 1_000_000
+  return nanoseconds;
+}
+
+function getRandomIndex(length: number) {
+  return Math.floor(Math.random() * length);
+}
+
+function randomArrayItem<T>(arr: Array<T>) {
+  return arr[getRandomIndex(arr.length)];
+}
+
+const clientNames = new Array(countUniqueClients)
+  .fill(null)
+  .map(() => randomString(randomIntBetween(5, 30)));
+
+const appVersions = new Map<string, Array<string>>();
+
+for (const name of clientNames) {
+  const versions = new Array<string>();
+  for (let i = 0; i <= appVersionsPerClient; i++) {
+    versions.push(randomString(20));
+  }
+  appVersions.set(name, versions);
+}
+
+function generateRandomClient() {
+  const name = randomArrayItem(clientNames);
+  const version = randomArrayItem(appVersions.get(name)!);
+
+  return {
+    name,
+    version,
+  };
+}
+
+const errorCodes = new Array(countUniqueErrorCodes)
+  .fill(null)
+  .map(() => randomString(randomIntBetween(3, 30)));
+
+function getRandomErrorCodes() {
+  if (randomIntBetween(0, 10) > 3) {
+    return '';
+  }
+
+  if (randomIntBetween(0, 10) > 3) {
+    return new Array(randomIntBetween(1, 10)).fill(null).map(() => randomArrayItem(errorCodes));
+  }
+
+  return [randomArrayItem(errorCodes)];
+}
+
+// graphql query document size
+// operation name length
+//
+
+const references: Array<Reference> = [
+  open('./../../scripts/seed-traces/sample-introspection.json'),
+  open('./../../scripts/seed-traces/sample-my-profile.json'),
+  open('./../../scripts/seed-traces/sample-products-overview.json'),
+  open('./../../scripts/seed-traces/sample-user-review.json'),
+  open('./../../scripts/seed-traces/sample-user-review-error-missing-variables.json'),
+  open('./../../scripts/seed-traces/sample-user-review-not-found.json'),
+].map(res => JSON.parse(res));
+
+function mutate(currentTime: Date, reference: Reference) {
+  const newTraceId = randomId();
+  const newSpanIds = new Map<string, string>();
+
+  function getNewSpanId(spanId: string) {
+    let newSpanId = newSpanIds.get(spanId);
+    if (!newSpanId) {
+      newSpanId = randomId(16);
+      newSpanIds.set(spanId, newSpanId);
+    }
+
+    return newSpanId;
+  }
+
+  let rootTrace:
+    | Reference[number]['resourceSpans'][number]['scopeSpans'][number]['spans'][number]
+    | null = null;
+
+  for (const payload of reference) {
+    for (const resourceSpan of payload.resourceSpans) {
+      for (const scopeSpan of resourceSpan.scopeSpans) {
+        for (const span of scopeSpan.spans) {
+          if (span.parentSpanId === undefined) {
+            rootTrace = span;
+            const client = generateRandomClient();
+
+            rootTrace.attributes.push(
+              {
+                key: 'hive.client.name',
+                value: { stringValue: client.name },
+              },
+              {
+                key: 'hive.client.version',
+                value: { stringValue: client.version },
+              },
+              // TODO: actually calculate this based on the operation.
+              {
+                key: 'hive.graphql.operation.hash',
+                value: { stringValue: randomString(20) },
+              },
+            );
+
+            const errors = getRandomErrorCodes();
+
+            if (errors) {
+              rootTrace.attributes.push(
+                {
+                  key: 'hive.graphql.error.codes',
+                  value: { stringValue: errors.join(',') },
+                },
+                {
+                  key: 'hive.graphql.error.count',
+                  value: { stringValue: String(errors.length) },
+                },
+              );
+            }
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  if (!rootTrace) {
+    throw new Error('Parent Span must always be the first span in the file.');
+  }
+
+  const startTime = BigInt(rootTrace.startTimeUnixNano);
+  const currentTimeB = toTimeUnixNano(currentTime);
+
+  for (const payload of reference) {
+    for (const resourceSpans of payload.resourceSpans) {
+      for (const scopeSpan of resourceSpans.scopeSpans) {
+        for (const span of scopeSpan.spans) {
+          if (span.parentSpanId) {
+            span.parentSpanId = getNewSpanId(span.parentSpanId);
+          }
+
+          span.spanId = getNewSpanId(span.spanId);
+          span.traceId = newTraceId;
+
+          const spanStartTime = BigInt(span.startTimeUnixNano);
+          const spanEndTime = BigInt(span.endTimeUnixNano);
+          const spanDuration = spanEndTime - spanStartTime;
+          const spanOffset = spanStartTime - startTime;
+          const newStartTime = currentTimeB + spanOffset;
+          span.startTimeUnixNano = newStartTime.toString();
+          span.endTimeUnixNano = (newStartTime + spanDuration).toString();
+
+          if (span.events.length) {
+            for (const event of span.events) {
+              const spanStartTime = BigInt(event.timeUnixNano);
+              const spanOffset = spanStartTime - startTime;
+              const newStartTime = currentTimeB + spanOffset;
+              event.timeUnixNano = newStartTime.toString();
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+function createTrace(date: Date, reference: Reference) {
+  return immer.produce(reference, draft => mutate(date, draft));
+}
+
+export default function () {
+  const reference = randomArrayItem(references);
+  const tracePayloads = createTrace(new Date(), reference);
+
+  http.post(otelEndpointUrl, JSON.stringify(tracePayloads), {
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d78d354b56..09f2efa850 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -376,6 +376,12 @@ importers:
         specifier: 3.25.76
         version: 3.25.76
 
+  load-tests/otel-traces:
+    devDependencies:
+      '@types/k6':
+        specifier: 1.2.0
+        version: 1.2.0
+
   packages/libraries/apollo:
     dependencies:
       '@graphql-hive/core':
@@ -8508,6 +8514,9 @@ packages:
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
+  '@types/k6@1.2.0':
+    resolution: {integrity: sha512-7F/vjekOUCzFi5AY+yYBOL38iEtN9EXufdKOAMFkJsdLryJ3/bB/W9jppED1FO5o7zeaPf8M46ardYPD8xgy/w==}
+
   '@types/katex@0.16.7':
     resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
 
@@ -17582,8 +17591,8 @@ snapshots:
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sso-oidc': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17690,11 +17699,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sso-oidc@3.596.0(@aws-sdk/client-sts@3.596.0)':
+  '@aws-sdk/client-sso-oidc@3.596.0':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17733,7 +17742,6 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
-      - '@aws-sdk/client-sts'
       - aws-crt
 
   '@aws-sdk/client-sso-oidc@3.723.0(@aws-sdk/client-sts@3.723.0)':
@@ -17867,11 +17875,11 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@aws-sdk/client-sts@3.596.0':
+  '@aws-sdk/client-sts@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
       '@aws-crypto/sha256-browser': 3.0.0
       '@aws-crypto/sha256-js': 3.0.0
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0
       '@aws-sdk/core': 3.592.0
       '@aws-sdk/credential-provider-node': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)
       '@aws-sdk/middleware-host-header': 3.577.0
@@ -17910,6 +17918,7 @@ snapshots:
       '@smithy/util-utf8': 3.0.0
       tslib: 2.8.1
     transitivePeerDependencies:
+      - '@aws-sdk/client-sso-oidc'
       - aws-crt
 
   '@aws-sdk/client-sts@3.723.0':
@@ -18023,7 +18032,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-ini@3.596.0(@aws-sdk/client-sso-oidc@3.596.0)(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/credential-provider-env': 3.587.0
       '@aws-sdk/credential-provider-http': 3.596.0
       '@aws-sdk/credential-provider-process': 3.587.0
@@ -18142,7 +18151,7 @@ snapshots:
 
   '@aws-sdk/credential-provider-web-identity@3.587.0(@aws-sdk/client-sts@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sts': 3.596.0
+      '@aws-sdk/client-sts': 3.596.0(@aws-sdk/client-sso-oidc@3.596.0)
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/types': 3.7.2
@@ -18317,7 +18326,7 @@ snapshots:
 
   '@aws-sdk/token-providers@3.587.0(@aws-sdk/client-sso-oidc@3.596.0)':
     dependencies:
-      '@aws-sdk/client-sso-oidc': 3.596.0(@aws-sdk/client-sts@3.596.0)
+      '@aws-sdk/client-sso-oidc': 3.596.0
       '@aws-sdk/types': 3.577.0
       '@smithy/property-provider': 3.1.11
       '@smithy/shared-ini-file-loader': 3.1.12
@@ -25795,8 +25804,8 @@ snapshots:
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3)
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-config-prettier: 9.1.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-jsonc: 2.11.1(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       eslint-plugin-mdx: 3.0.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
@@ -26187,6 +26196,8 @@ snapshots:
 
   '@types/json5@0.0.29': {}
 
+  '@types/k6@1.2.0': {}
+
   '@types/katex@0.16.7': {}
 
   '@types/keyv@3.1.4':
@@ -28714,13 +28725,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       debug: 4.4.1(supports-color@8.1.1)
       enhanced-resolve: 5.17.1
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       fast-glob: 3.3.2
       get-tsconfig: 4.7.5
       is-core-module: 2.13.1
@@ -28751,14 +28762,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-module-utils@2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       debug: 3.2.7(supports-color@8.1.1)
     optionalDependencies:
       '@typescript-eslint/parser': 7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3)
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
     transitivePeerDependencies:
       - supports-color
 
@@ -28774,7 +28785,7 @@ snapshots:
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-compat-utils: 0.1.2(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)):
     dependencies:
       array-includes: 3.1.7
       array.prototype.findlastindex: 1.2.3
@@ -28784,7 +28795,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0)))(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
+      eslint-module-utils: 2.8.0(@typescript-eslint/parser@7.18.0(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))(typescript@5.7.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.1(patch_hash=08d9d41d21638cb74d0f9f34877a8839601a4e5a8263066ff23e7032addbcba0))
       hasown: 2.0.2
       is-core-module: 2.13.1
       is-glob: 4.0.3
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 52ce958390..9026ba15e9 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -9,3 +9,4 @@ packages:
   - deployment
   - scripts
   - rules
+  - load-tests/otel-traces
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index f78f270adf..86a28eb438 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -565,7 +565,7 @@ function getRandomIndex(length: number) {
 }
 
 function randomArrayItem<T>(arr: Array<T>) {
-  return arr[getRandomIndex(appVersions.size)];
+  return arr[getRandomIndex(arr.length)];
 }
 
 const clientNames = ['sales-app', 'product-cron-sync', 'analytics-dashboard'];

From 3f3d7347676d47de4d0b3743e93cd2e2bf73bd88 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 14:40:17 +0200
Subject: [PATCH 075/123] typefix

---
 packages/web/app/src/pages/target-trace.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index f63c5cc3cf..47d3138111 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -798,7 +798,7 @@ export function TraceSheet(props: TraceSheetProps) {
                 <ActiveSpanIdContext.Provider value={props.activeSpanId}>
                   <TraceView
                     rootSpan={rootSpan}
-                    serviceNames={trace.subgraphs}
+                    serviceNames={trace.subgraphs ?? []}
                     totalTraceDuration={totalTraceDuration}
                     organizationSlug={props.organizationSlug}
                     projectSlug={props.projectSlug}

From b019d858c0ea115bb195f8bf8a4486e13ae22c2d Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 15:06:47 +0200
Subject: [PATCH 076/123] server preset pls

---
 load-tests/otel-traces/test.ts                     | 14 ++++++++++----
 .../api/src/modules/operations/resolvers/Target.ts |  4 ++--
 packages/web/app/src/pages/target-traces.tsx       |  2 +-
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/load-tests/otel-traces/test.ts b/load-tests/otel-traces/test.ts
index 64edba24c7..c3de669499 100644
--- a/load-tests/otel-traces/test.ts
+++ b/load-tests/otel-traces/test.ts
@@ -208,10 +208,16 @@ function createTrace(date: Date, reference: Reference) {
 }
 
 export default function () {
-  const reference = randomArrayItem(references);
-  const tracePayloads = createTrace(new Date(), reference);
-
-  http.post(otelEndpointUrl, JSON.stringify(tracePayloads), {
+  const data = new Array(50)
+    .fill(null)
+    .map(() => {
+      const reference = randomArrayItem(references);
+      const tracePayloads = createTrace(new Date(), reference);
+      return tracePayloads;
+    })
+    .flatMap(i => i);
+
+  http.post(otelEndpointUrl, JSON.stringify(data), {
     headers: { 'Content-Type': 'application/json' },
   });
 }
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 83c674f92c..37130a5f60 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -95,7 +95,7 @@ export const Target: Pick<
         success: filter?.success ?? null,
         errorCodes: filter?.errorCodes ?? null,
         operationNames: filter?.operationNames ?? null,
-        operationTypes: filter?.operationTypes ?? null,
+        operationTypes: filter?.operationTypes?.map(value => value ?? null) ?? null,
         clientNames: filter?.clientNames ?? null,
         subgraphNames: filter?.subgraphNames ?? null,
         httpMethods: filter?.httpMethods ?? null,
@@ -254,7 +254,7 @@ export const Target: Pick<
       success: filter?.success ?? null,
       errorCodes: filter?.errorCodes ?? null,
       operationNames: filter?.operationNames ?? null,
-      operationTypes: filter?.operationTypes ?? null,
+      operationTypes: filter?.operationTypes?.map(value => value ?? null) ?? null,
       clientNames: filter?.clientNames ?? null,
       subgraphNames: filter?.subgraphNames ?? null,
       httpMethods: filter?.httpMethods ?? null,
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 3e199d01b4..8c45fc2f48 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -678,7 +678,7 @@ type FilterKeys = keyof FilterState;
 
 type FilterOptions = {
   [key: string]: Array<{
-    value: string;
+    value: string | null;
     searchContent: string;
     label: ReactNode;
     count: number;

From ae283ff92aaea7c0c0a0399315eabbd05819e780 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 15:48:26 +0200
Subject: [PATCH 077/123] single

---
 packages/services/server/src/index.ts            |  9 ++++++++-
 .../services/server/src/otel-auth-endpoint.ts    | 16 ++++------------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/services/server/src/index.ts b/packages/services/server/src/index.ts
index 479727eeb4..bf29d4d068 100644
--- a/packages/services/server/src/index.ts
+++ b/packages/services/server/src/index.ts
@@ -25,6 +25,8 @@ import {
 } from '@hive/api';
 import { HivePubSub } from '@hive/api/modules/shared/providers/pub-sub';
 import { createRedisClient } from '@hive/api/modules/shared/providers/redis';
+import { TargetsByIdCache } from '@hive/api/modules/target/providers/targets-by-id-cache';
+import { TargetsBySlugCache } from '@hive/api/modules/target/providers/targets-by-slug-cache';
 import { createArtifactRequestHandler } from '@hive/cdn-script/artifact-handler';
 import { ArtifactStorageReader } from '@hive/cdn-script/artifact-storage-reader';
 import { AwsClient } from '@hive/cdn-script/aws';
@@ -595,7 +597,12 @@ export async function main() {
       return;
     });
 
-    createOtelAuthEndpoint({ server, authN, redis, pgPool: storage.pool, tracing: !!tracing });
+    createOtelAuthEndpoint({
+      server,
+      authN,
+      targetsBySlugCache: registry.injector.get(TargetsBySlugCache),
+      targetsByIdCache: registry.injector.get(TargetsByIdCache),
+    });
 
     if (env.cdn.providers.api !== null) {
       const s3 = {
diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
index d6f29ec555..e1f0587605 100644
--- a/packages/services/server/src/otel-auth-endpoint.ts
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -1,23 +1,15 @@
 import type { FastifyInstance } from 'fastify';
-import type Redis from 'ioredis';
-import type { DatabasePool } from 'slonik';
 import type { AuthN } from '@hive/api/modules/auth/lib/authz';
-import { PrometheusConfig } from '@hive/api/modules/shared/providers/prometheus-config';
 import { TargetsByIdCache } from '@hive/api/modules/target/providers/targets-by-id-cache';
 import { TargetsBySlugCache } from '@hive/api/modules/target/providers/targets-by-slug-cache';
 import { isUUID } from '@hive/api/shared/is-uuid';
 
 export function createOtelAuthEndpoint(args: {
   server: FastifyInstance;
-  tracing: boolean;
   authN: AuthN;
-  redis: Redis;
-  pgPool: DatabasePool;
+  targetsByIdCache: TargetsByIdCache;
+  targetsBySlugCache: TargetsBySlugCache;
 }) {
-  const prometheusConfig = new PrometheusConfig(args.tracing);
-  const targetsByIdCache = new TargetsByIdCache(args.redis, args.pgPool, prometheusConfig);
-  const targetsBySlugCache = new TargetsBySlugCache(args.redis, args.pgPool, prometheusConfig);
-
   args.server.get('/otel-auth', async (req, reply) => {
     const targetRefHeader = req.headers['x-hive-target-ref'];
 
@@ -44,8 +36,8 @@ export function createOtelAuthEndpoint(args: {
     const session = await args.authN.authenticate({ req, reply });
 
     const target = await (targetRef.kind === 'id'
-      ? targetsByIdCache.get(targetRef.targetId)
-      : targetsBySlugCache.get(targetRef));
+      ? args.targetsByIdCache.get(targetRef.targetId)
+      : args.targetsBySlugCache.get(targetRef));
 
     if (!target) {
       await reply.status(404).send({

From e26537437a08e788e46f2ceb55bf2e71d0903d31 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 16:05:49 +0200
Subject: [PATCH 078/123] not my type

---
 packages/services/server/src/otel-auth-endpoint.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
index e1f0587605..1b02e9a515 100644
--- a/packages/services/server/src/otel-auth-endpoint.ts
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -1,7 +1,7 @@
 import type { FastifyInstance } from 'fastify';
 import type { AuthN } from '@hive/api/modules/auth/lib/authz';
-import { TargetsByIdCache } from '@hive/api/modules/target/providers/targets-by-id-cache';
-import { TargetsBySlugCache } from '@hive/api/modules/target/providers/targets-by-slug-cache';
+import type { TargetsByIdCache } from '@hive/api/modules/target/providers/targets-by-id-cache';
+import type { TargetsBySlugCache } from '@hive/api/modules/target/providers/targets-by-slug-cache';
 import { isUUID } from '@hive/api/shared/is-uuid';
 
 export function createOtelAuthEndpoint(args: {

From 860b681710a0e797bfc7ba759db1e7a9b87ad9f7 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Mon, 22 Sep 2025 16:18:29 +0200
Subject: [PATCH 079/123] if we use it it must be there :)

---
 docker/configs/otel-collector/builder-config.yaml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docker/configs/otel-collector/builder-config.yaml b/docker/configs/otel-collector/builder-config.yaml
index 85b88a32ad..5bea06230f 100644
--- a/docker/configs/otel-collector/builder-config.yaml
+++ b/docker/configs/otel-collector/builder-config.yaml
@@ -9,6 +9,7 @@ receivers:
 
 processors:
   - gomod: go.opentelemetry.io/collector/processor/batchprocessor v0.122.0
+  - gomod: go.opentelemetry.io/collector/processor/memorylimiterprocessor v0.122.0
   - gomod:
       github.com/open-telemetry/opentelemetry-collector-contrib/processor/attributesprocessor
       v0.122.0

From 4975ef7f62abb072cf5415366b878bd13edfcd60 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 23 Sep 2025 12:26:12 +0200
Subject: [PATCH 080/123] lel


From dbdf2c3743a424f70ed6498be388c50d14168e6b Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 23 Sep 2025 14:26:01 +0200
Subject: [PATCH 081/123] jeeee

---
 load-tests/otel-traces/test.ts | 48 ++++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/load-tests/otel-traces/test.ts b/load-tests/otel-traces/test.ts
index c3de669499..7e8a2eb944 100644
--- a/load-tests/otel-traces/test.ts
+++ b/load-tests/otel-traces/test.ts
@@ -1,7 +1,12 @@
+import './bru.ts';
+import { expect } from 'https://jslib.k6.io/k6-testing/0.5.0/index.js';
 import { randomIntBetween, randomString } from 'https://jslib.k6.io/k6-utils/1.2.0/index.js';
 import * as immer from 'https://unpkg.com/immer@10.1.3/dist/immer.mjs';
 import http from 'k6/http';
 
+// prettier-ignore
+globalThis.process = { env: {} };
+
 // Cardinality Variables Start
 const countUniqueErrorCodes = 1_000;
 const countUniqueClients = 1_000;
@@ -25,12 +30,19 @@ if (!HIVE_TARGET_REF) {
 
 // A helper to generate a random 16-byte trace/span ID in hex
 function randomId(bytes: number = 32): string {
-  const chars = 'abcdef0123456789';
-  let out = '';
-  for (let i = 0; i < bytes * 2; i++) {
-    out += chars.charAt(Math.floor(Math.random() * chars.length));
+  let traceId = '';
+  for (let i = 0; i < bytes; i++) {
+    // generate random nibble (0–15)
+    const nibble = Math.floor(Math.random() * 16);
+    traceId += nibble.toString(16);
+  }
+
+  // ensure not all zero (very unlikely)
+  if (/^0+$/.test(traceId)) {
+    return randomId(bytes);
   }
-  return out;
+
+  return traceId;
 }
 
 function toTimeUnixNano(date = new Date()) {
@@ -208,16 +220,20 @@ function createTrace(date: Date, reference: Reference) {
 }
 
 export default function () {
-  const data = new Array(50)
-    .fill(null)
-    .map(() => {
-      const reference = randomArrayItem(references);
-      const tracePayloads = createTrace(new Date(), reference);
-      return tracePayloads;
-    })
-    .flatMap(i => i);
-
-  http.post(otelEndpointUrl, JSON.stringify(data), {
-    headers: { 'Content-Type': 'application/json' },
+  const data = new Array(50).fill(null).flatMap(() => {
+    const reference = randomArrayItem(references);
+    const tracePayloads = createTrace(new Date(), reference);
+    return tracePayloads.flatMap(payload => payload.resourceSpans);
   });
+
+  const response = http.post(otelEndpointUrl, JSON.stringify({ resourceSpans: data }), {
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${HIVE_ORGANIZATION_ACCESS_TOKEN}`,
+      'x-hive-target-ref': HIVE_TARGET_REF,
+    },
+  });
+
+  console.log('response', response.body);
+  expect(response.status).toBe(200);
 }

From 78f27505e0aee33c1cccb423ff295b735046a61e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 23 Sep 2025 14:26:58 +0200
Subject: [PATCH 082/123] ooops

---
 deployment/services/otel-collector.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/deployment/services/otel-collector.ts b/deployment/services/otel-collector.ts
index f00cb0a33c..68f6251f83 100644
--- a/deployment/services/otel-collector.ts
+++ b/deployment/services/otel-collector.ts
@@ -26,7 +26,6 @@ export function deployOTELCollector(args: {
         HIVE_OTEL_AUTH_ENDPOINT: serviceLocalEndpoint(args.graphql.service).apply(
           value => value + '/otel-auth',
         ),
-        CLICKHOUSE_PROTOCOL: 'http',
       },
       /**
        * We are using the healthcheck extension.
@@ -56,5 +55,6 @@ export function deployOTELCollector(args: {
     .withSecret('CLICKHOUSE_PORT', args.clickhouse.secret, 'port')
     .withSecret('CLICKHOUSE_USERNAME', args.clickhouse.secret, 'username')
     .withSecret('CLICKHOUSE_PASSWORD', args.clickhouse.secret, 'password')
+    .withSecret('CLICKHOUSE_PROTOCOL', args.clickhouse.secret, 'protocol')
     .deploy();
 }

From 3537366249c2e37a50e20d08a16f6e6cdffb53fc Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 23 Sep 2025 15:57:22 +0200
Subject: [PATCH 083/123] int

---
 packages/services/api/src/modules/operations/module.graphql.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index 79b8893fed..b03c68ef50 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -281,7 +281,7 @@ export default gql`
     """
     Total duration of the trace.
     """
-    duration: Int!
+    duration: SafeInt!
     """
     The subgraphs called within the trace.
     """

From c6b61362737045ebc1a40d87a4ec4ff0c33b2503 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 23 Sep 2025 15:57:39 +0200
Subject: [PATCH 084/123] use up 2 date attributes

---
 scripts/seed-traces/sample-introspection.json             | 2 +-
 scripts/seed-traces/sample-my-profile.json                | 8 ++++----
 scripts/seed-traces/sample-products-overview.json         | 8 ++++----
 .../sample-user-review-error-missing-variables.json       | 2 +-
 scripts/seed-traces/sample-user-review-not-found.json     | 4 ++--
 scripts/seed-traces/sample-user-review.json               | 8 ++++----
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/scripts/seed-traces/sample-introspection.json b/scripts/seed-traces/sample-introspection.json
index 0c5e8f02c5..5430dbae1f 100644
--- a/scripts/seed-traces/sample-introspection.json
+++ b/scripts/seed-traces/sample-introspection.json
@@ -462,7 +462,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query IntrospectionQuery{__schema{description queryType{name kind}mutationType{name kind}subscriptionType{name kind}types{...FullType}directives{name description locations args(includeDeprecated:true){...InputValue}}}}fragment FullType on __Type{kind name description fields(includeDeprecated:true){name description args(includeDeprecated:true){...InputValue}type{...TypeRef}isDeprecated deprecationReason}inputFields(includeDeprecated:true){...InputValue}interfaces{...TypeRef}enumValues(includeDeprecated:true){name description isDeprecated deprecationReason}possibleTypes{...TypeRef}}fragment InputValue on __InputValue{name description type{...TypeRef}defaultValue isDeprecated deprecationReason}fragment TypeRef on __Type{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name ofType{kind name}}}}}}}}}}"
                     }
diff --git a/scripts/seed-traces/sample-my-profile.json b/scripts/seed-traces/sample-my-profile.json
index 6a29f4f0fd..da299c5141 100644
--- a/scripts/seed-traces/sample-my-profile.json
+++ b/scripts/seed-traces/sample-my-profile.json
@@ -287,7 +287,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query MyProfile{__typename me{__typename id id username name}}"
                     }
@@ -447,7 +447,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}}}}}"
                     }
@@ -607,7 +607,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query MyProfile($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name}}}"
                     }
@@ -783,7 +783,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query MyProfile{me{id username name reviews{id product{upc name}}}}"
                     }
diff --git a/scripts/seed-traces/sample-products-overview.json b/scripts/seed-traces/sample-products-overview.json
index 1591a1bfc2..71fb2f7521 100644
--- a/scripts/seed-traces/sample-products-overview.json
+++ b/scripts/seed-traces/sample-products-overview.json
@@ -287,7 +287,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query TopProductsOverview($first:Int){__typename topProducts(first:$first){__typename upc name upc price weight}}"
                     }
@@ -447,7 +447,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc reviews{__typename id id body author{username __typename __typename id id}}}}}"
                     }
@@ -607,7 +607,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query TopProductsOverview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id name}}}"
                     }
@@ -783,7 +783,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query TopProductsOverview{topProducts{name upc price weight reviews{id body author{id username name}}}}"
                     }
diff --git a/scripts/seed-traces/sample-user-review-error-missing-variables.json b/scripts/seed-traces/sample-user-review-error-missing-variables.json
index a58cb80dbf..d0cd55f4e7 100644
--- a/scripts/seed-traces/sample-user-review-error-missing-variables.json
+++ b/scripts/seed-traces/sample-user-review-error-missing-variables.json
@@ -281,7 +281,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
                     }
diff --git a/scripts/seed-traces/sample-user-review-not-found.json b/scripts/seed-traces/sample-user-review-not-found.json
index 6823e695b7..3fcfd9eab9 100644
--- a/scripts/seed-traces/sample-user-review-not-found.json
+++ b/scripts/seed-traces/sample-user-review-not-found.json
@@ -287,7 +287,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
                     }
@@ -463,7 +463,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
                     }
diff --git a/scripts/seed-traces/sample-user-review.json b/scripts/seed-traces/sample-user-review.json
index 9d201494a1..414ad4bc4a 100644
--- a/scripts/seed-traces/sample-user-review.json
+++ b/scripts/seed-traces/sample-user-review.json
@@ -287,7 +287,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($id:ID!){__typename user(id:$id){__typename id id}}"
                     }
@@ -447,7 +447,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on User{id reviews{__typename id id product{__typename upc upc}body}}}}"
                     }
@@ -607,7 +607,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($representations:[_Any!]!){__typename _entities(representations:$representations){__typename ...on Product{upc name weight}}}"
                     }
@@ -783,7 +783,7 @@
                     }
                   },
                   {
-                    "key": "hive.graphql.operation.document",
+                    "key": "graphql.document",
                     "value": {
                       "stringValue": "query UserReview($id:ID!){user(id:$id){id reviews{id product{upc name weight}body}}}"
                     }

From ea9409b928af31cc4a6beb8b7d5c2f4306b6430e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 24 Sep 2025 11:22:52 +0200
Subject: [PATCH 085/123] remove the rouge span

---
 scripts/seed-traces/sample-introspection.json | 50 -------------------
 scripts/seed-traces/sample-my-profile.json    | 49 ------------------
 .../seed-traces/sample-products-overview.json | 49 ------------------
 ...e-user-review-error-missing-variables.json | 49 ------------------
 .../sample-user-review-not-found.json         | 49 ------------------
 scripts/seed-traces/sample-user-review.json   | 49 ------------------
 6 files changed, 295 deletions(-)

diff --git a/scripts/seed-traces/sample-introspection.json b/scripts/seed-traces/sample-introspection.json
index 5430dbae1f..f0c6dd3a91 100644
--- a/scripts/seed-traces/sample-introspection.json
+++ b/scripts/seed-traces/sample-introspection.json
@@ -103,56 +103,6 @@
       }
     ]
   },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "6045da1fe92d42a36f0ffdcca55efa46",
-                "spanId": "17fd8c5b3d731702",
-                "parentSpanId": "b763ec1ad8a305ca",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541577186000000",
-                "endTimeUnixNano": "1751541577337256209",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "resourceSpans": [
       {
diff --git a/scripts/seed-traces/sample-my-profile.json b/scripts/seed-traces/sample-my-profile.json
index da299c5141..7c5c4dec9a 100644
--- a/scripts/seed-traces/sample-my-profile.json
+++ b/scripts/seed-traces/sample-my-profile.json
@@ -111,55 +111,6 @@
       }
     ]
   },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "cb49bd18a410f719ead0c10bfe092361",
-                "spanId": "36a0e4ee75933806",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541696985000000",
-                "endTimeUnixNano": "1751541697138885000",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "resourceSpans": [
       {
diff --git a/scripts/seed-traces/sample-products-overview.json b/scripts/seed-traces/sample-products-overview.json
index 71fb2f7521..cffd4c83c4 100644
--- a/scripts/seed-traces/sample-products-overview.json
+++ b/scripts/seed-traces/sample-products-overview.json
@@ -111,55 +111,6 @@
       }
     ]
   },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "6869ef8f8ce5f8a16b1e8f1f0b26e7d9",
-                "spanId": "1bcf46d2b47df769",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541486712000000",
-                "endTimeUnixNano": "1751541486821788833",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "resourceSpans": [
       {
diff --git a/scripts/seed-traces/sample-user-review-error-missing-variables.json b/scripts/seed-traces/sample-user-review-error-missing-variables.json
index d0cd55f4e7..d275aa8bf4 100644
--- a/scripts/seed-traces/sample-user-review-error-missing-variables.json
+++ b/scripts/seed-traces/sample-user-review-error-missing-variables.json
@@ -320,54 +320,5 @@
         ]
       }
     ]
-  },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "28023847cc58b3c3fb9c163f6eab92b2",
-                "spanId": "0e237fa205aed49f",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541923663000000",
-                "endTimeUnixNano": "1751541923768741667",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
   }
 ]
diff --git a/scripts/seed-traces/sample-user-review-not-found.json b/scripts/seed-traces/sample-user-review-not-found.json
index 3fcfd9eab9..fdbcee1e65 100644
--- a/scripts/seed-traces/sample-user-review-not-found.json
+++ b/scripts/seed-traces/sample-user-review-not-found.json
@@ -111,55 +111,6 @@
       }
     ]
   },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "1601ed274ede73e8900daf9125e7e1f6",
-                "spanId": "293e53edace6b4a8",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541851833000000",
-                "endTimeUnixNano": "1751541851947102917",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "resourceSpans": [
       {
diff --git a/scripts/seed-traces/sample-user-review.json b/scripts/seed-traces/sample-user-review.json
index 414ad4bc4a..17d40b35b7 100644
--- a/scripts/seed-traces/sample-user-review.json
+++ b/scripts/seed-traces/sample-user-review.json
@@ -111,55 +111,6 @@
       }
     ]
   },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "2057b212e70318a1e6372842982b6f32",
-                "spanId": "be8b5db997a5ba76",
-                "name": "http.fetch",
-                "kind": 3,
-                "startTimeUnixNano": "1751541997639000000",
-                "endTimeUnixNano": "1751541997753010916",
-                "attributes": [],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 0
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
   {
     "resourceSpans": [
       {

From 5ff1650fd5ba196d15d67934b1aaee471ad64aa2 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 24 Sep 2025 13:27:59 +0200
Subject: [PATCH 086/123] adjust fixtures

---
 load-tests/otel-traces/test.ts                |  12 +-
 .../src/clickhouse-actions/015-otel-trace.ts  |   3 +-
 scripts/seed-traces/sample-introspection.json | 170 +-----------------
 scripts/seed-traces/sample-my-profile.json    |  20 ++-
 .../seed-traces/sample-products-overview.json |  20 ++-
 ...e-user-review-error-missing-variables.json |   6 +
 .../sample-user-review-not-found.json         |  12 +-
 scripts/seed-traces/sample-user-review.json   |  20 ++-
 scripts/seed-traces/seed-traces.mts           |  16 +-
 9 files changed, 94 insertions(+), 185 deletions(-)

diff --git a/load-tests/otel-traces/test.ts b/load-tests/otel-traces/test.ts
index 7e8a2eb944..6caedf874a 100644
--- a/load-tests/otel-traces/test.ts
+++ b/load-tests/otel-traces/test.ts
@@ -89,7 +89,7 @@ const errorCodes = new Array(countUniqueErrorCodes)
 
 function getRandomErrorCodes() {
   if (randomIntBetween(0, 10) > 3) {
-    return '';
+    return [];
   }
 
   if (randomIntBetween(0, 10) > 3) {
@@ -156,15 +156,19 @@ function mutate(currentTime: Date, reference: Reference) {
 
             const errors = getRandomErrorCodes();
 
-            if (errors) {
+            if (errors.length) {
               rootTrace.attributes.push(
                 {
                   key: 'hive.graphql.error.codes',
-                  value: { stringValue: errors.join(',') },
+                  value: {
+                    arrayValue: {
+                      values: errors.map(code => ({ stringValue: code })),
+                    },
+                  },
                 },
                 {
                   key: 'hive.graphql.error.count',
-                  value: { stringValue: String(errors.length) },
+                  value: { intValue: errors.length },
                 },
               );
             }
diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index 24320bee12..bd3adb3cad 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -222,6 +222,7 @@ export const action: Action = async exec => {
         "otel_traces"
       WHERE
         empty("ParentSpanId")
+        AND notEmpty("SpanAttributes"['hive.graphql'])
     )
   `);
 
@@ -309,7 +310,7 @@ export const action: Action = async exec => {
       FROM
         "otel_traces"
       WHERE
-        startsWith("SpanName", 'subgraph.execute')
+        notEmpty("SpanAttributes"['hive.graphql.subgraph.name'])
     )
   `);
 };
diff --git a/scripts/seed-traces/sample-introspection.json b/scripts/seed-traces/sample-introspection.json
index f0c6dd3a91..18acf1677f 100644
--- a/scripts/seed-traces/sample-introspection.json
+++ b/scripts/seed-traces/sample-introspection.json
@@ -25,170 +25,6 @@
               "name": "gateway"
             },
             "spans": [
-              {
-                "traceId": "d72a6b878beb3fee4287243c1c51ebaa",
-                "spanId": "bf7578eaabcd9963",
-                "name": "GET /graphql",
-                "kind": 2,
-                "startTimeUnixNano": "1751541577026000000",
-                "endTimeUnixNano": "1751541577027457584",
-                "attributes": [
-                  {
-                    "key": "http.method",
-                    "value": {
-                      "stringValue": "GET"
-                    }
-                  },
-                  {
-                    "key": "http.url",
-                    "value": {
-                      "stringValue": "http://localhost:4000/graphql?query=query+TopProductsOverview+%7B%0A++topProducts+%7B%0A++++name%0A++++upc%0A++++price%0A++++weight%0A++++reviews+%7B%0A++++++id%0A++++++body%0A++++++author+%7B%0A++++++++id%0A++++++++username%0A++++++++name%0A++++++%7D%0A++++%7D%0A++%7D%0A%7D"
-                    }
-                  },
-                  {
-                    "key": "http.route",
-                    "value": {
-                      "stringValue": "/graphql"
-                    }
-                  },
-                  {
-                    "key": "http.scheme",
-                    "value": {
-                      "stringValue": "http:"
-                    }
-                  },
-                  {
-                    "key": "net.host.name",
-                    "value": {
-                      "stringValue": "localhost"
-                    }
-                  },
-                  {
-                    "key": "http.host",
-                    "value": {
-                      "stringValue": "localhost:4000"
-                    }
-                  },
-                  {
-                    "key": "http.user_agent",
-                    "value": {
-                      "stringValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36"
-                    }
-                  },
-                  {
-                    "key": "http.status_code",
-                    "value": {
-                      "intValue": 200
-                    }
-                  },
-                  {
-                    "key": "gateway.cache.response_cache",
-                    "value": {
-                      "stringValue": "miss"
-                    }
-                  }
-                ],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 1
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  {
-    "resourceSpans": [
-      {
-        "resource": {
-          "attributes": [
-            {
-              "key": "service.name",
-              "value": {
-                "stringValue": "hive-gateway"
-              }
-            },
-            {
-              "key": "service.version",
-              "value": {
-                "stringValue": "5.13.4"
-              }
-            }
-          ],
-          "droppedAttributesCount": 0
-        },
-        "scopeSpans": [
-          {
-            "scope": {
-              "name": "gateway"
-            },
-            "spans": [
-              {
-                "traceId": "6045da1fe92d42a36f0ffdcca55efa46",
-                "spanId": "b763ec1ad8a305ca",
-                "name": "gateway.initialization",
-                "kind": 1,
-                "startTimeUnixNano": "1751541567757845981",
-                "endTimeUnixNano": "1751541577382000000",
-                "attributes": [
-                  {
-                    "key": "http.method",
-                    "value": {
-                      "stringValue": "GET"
-                    }
-                  },
-                  {
-                    "key": "http.url",
-                    "value": {
-                      "stringValue": "http://host.docker.internal:3001/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph"
-                    }
-                  },
-                  {
-                    "key": "net.host.name",
-                    "value": {
-                      "stringValue": "host.docker.internal"
-                    }
-                  },
-                  {
-                    "key": "http.host",
-                    "value": {
-                      "stringValue": "host.docker.internal:3001"
-                    }
-                  },
-                  {
-                    "key": "http.route",
-                    "value": {
-                      "stringValue": "/artifacts/v1/219fedb6-8a9b-44d7-929f-b0b16750653c/supergraph"
-                    }
-                  },
-                  {
-                    "key": "http.scheme",
-                    "value": {
-                      "stringValue": "http:"
-                    }
-                  },
-                  {
-                    "key": "http.status_code",
-                    "value": {
-                      "intValue": 200
-                    }
-                  }
-                ],
-                "droppedAttributesCount": 0,
-                "events": [],
-                "droppedEventsCount": 0,
-                "status": {
-                  "code": 1
-                },
-                "links": [],
-                "droppedLinksCount": 0
-              },
               {
                 "traceId": "f42cb37f3811f650f06ca078e7c6625f",
                 "spanId": "c55a1a27cfe0a563",
@@ -434,6 +270,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/sample-my-profile.json b/scripts/seed-traces/sample-my-profile.json
index 7c5c4dec9a..63bae17a64 100644
--- a/scripts/seed-traces/sample-my-profile.json
+++ b/scripts/seed-traces/sample-my-profile.json
@@ -232,7 +232,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "users"
                     }
@@ -392,7 +392,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "reviews"
                     }
@@ -552,7 +552,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "products"
                     }
@@ -718,7 +718,13 @@
                   {
                     "key": "hive.gateway.operation.subgraph.names",
                     "value": {
-                      "stringValue": "users,reviews,products"
+                      "arrayValue": {
+                        "values": [
+                          { "stringValue": "users" },
+                          { "stringValue": "reviews" },
+                          { "stringValue": "products" }
+                        ]
+                      }
                     }
                   },
                   {
@@ -756,6 +762,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/sample-products-overview.json b/scripts/seed-traces/sample-products-overview.json
index cffd4c83c4..e477729421 100644
--- a/scripts/seed-traces/sample-products-overview.json
+++ b/scripts/seed-traces/sample-products-overview.json
@@ -232,7 +232,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "products"
                     }
@@ -392,7 +392,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "reviews"
                     }
@@ -552,7 +552,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "users"
                     }
@@ -718,7 +718,13 @@
                   {
                     "key": "hive.gateway.operation.subgraph.names",
                     "value": {
-                      "stringValue": "products,reviews,users"
+                      "arrayValue": {
+                        "values": [
+                          { "stringValue": "users" },
+                          { "stringValue": "reviews" },
+                          { "stringValue": "products" }
+                        ]
+                      }
                     }
                   },
                   {
@@ -756,6 +762,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/sample-user-review-error-missing-variables.json b/scripts/seed-traces/sample-user-review-error-missing-variables.json
index d275aa8bf4..7350c27522 100644
--- a/scripts/seed-traces/sample-user-review-error-missing-variables.json
+++ b/scripts/seed-traces/sample-user-review-error-missing-variables.json
@@ -303,6 +303,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/sample-user-review-not-found.json b/scripts/seed-traces/sample-user-review-not-found.json
index fdbcee1e65..a36abb2b8d 100644
--- a/scripts/seed-traces/sample-user-review-not-found.json
+++ b/scripts/seed-traces/sample-user-review-not-found.json
@@ -232,7 +232,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "users"
                     }
@@ -398,7 +398,9 @@
                   {
                     "key": "hive.gateway.operation.subgraph.names",
                     "value": {
-                      "stringValue": "users"
+                      "arrayValue": {
+                        "values": [{ "stringValue": "users" }]
+                      }
                     }
                   },
                   {
@@ -436,6 +438,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/sample-user-review.json b/scripts/seed-traces/sample-user-review.json
index 17d40b35b7..57a85b3078 100644
--- a/scripts/seed-traces/sample-user-review.json
+++ b/scripts/seed-traces/sample-user-review.json
@@ -232,7 +232,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "users"
                     }
@@ -392,7 +392,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "reviews"
                     }
@@ -552,7 +552,7 @@
                     }
                   },
                   {
-                    "key": "hive.subgraph.name",
+                    "key": "hive.gateway.upstream.subgraph.name",
                     "value": {
                       "stringValue": "products"
                     }
@@ -718,7 +718,13 @@
                   {
                     "key": "hive.gateway.operation.subgraph.names",
                     "value": {
-                      "stringValue": "users,reviews,products"
+                      "arrayValue": {
+                        "values": [
+                          { "stringValue": "users" },
+                          { "stringValue": "reviews" },
+                          { "stringValue": "products" }
+                        ]
+                      }
                     }
                   },
                   {
@@ -756,6 +762,12 @@
                     "value": {
                       "stringValue": "miss"
                     }
+                  },
+                  {
+                    "key": "hive.graphql",
+                    "value": {
+                      "boolValue": true
+                    }
                   }
                 ],
                 "droppedAttributesCount": 0,
diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 86a28eb438..6acefeaa8d 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -491,6 +491,14 @@ const reference = [
                       intValue: 0,
                     },
                   },
+                  {
+                    key: 'hive.graphql.error.codes',
+                    value: {
+                      arrayValue: {
+                        values: [{ stringValue: 'ERR_NOT_FOUND' }],
+                      },
+                    },
+                  },
                   {
                     key: 'http.status_code',
                     value: {
@@ -653,11 +661,15 @@ function mutate(currentTime: Date, reference: Reference) {
               rootTrace.attributes.push(
                 {
                   key: 'hive.graphql.error.codes',
-                  value: { stringValue: errors.join(',') },
+                  value: {
+                    arrayValue: {
+                      values: errors.map(code => ({ stringValue: code })),
+                    },
+                  },
                 },
                 {
                   key: 'hive.graphql.error.count',
-                  value: { stringValue: String(errors.length) },
+                  value: { intValue: errors.length },
                 },
               );
             }

From e60dac2b5d93088dd35a16a3f94c016bf4a0f2b5 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 24 Sep 2025 13:51:32 +0200
Subject: [PATCH 087/123] view operation for subgraph call

---
 packages/web/app/src/pages/target-trace.tsx | 26 ++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 47d3138111..36556c7b89 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1328,7 +1328,7 @@ type SpanSheetProps = {
 function SpanSheet(props: SpanSheetProps) {
   const span = useFragment(SpanSheet_SpanFragment, props.span);
   const [activeView, setActiveView] = useState<
-    'span-attributes' | 'resource-attributes' | 'events'
+    'span-attributes' | 'resource-attributes' | 'events' | 'operation'
   >((props.activeTab as 'events') ?? 'span-attributes');
   const clipboard = useClipboard();
 
@@ -1420,7 +1420,7 @@ function SpanSheet(props: SpanSheetProps) {
             </div>
           )}
         </SheetHeader>
-        <div className="overflow-hidden">
+        <div className="h-full overflow-hidden">
           <div className="flex h-full flex-col">
             <div className="sticky top-0 z-10 border-b border-gray-800">
               <div className="flex w-full gap-x-4 px-2 text-xs font-medium">
@@ -1472,9 +1472,19 @@ function SpanSheet(props: SpanSheetProps) {
                     </div>
                   </div>
                 </TabButton>
+                {span.spanAttributes['graphql.document'] && (
+                  <TabButton
+                    isActive={activeView === 'operation'}
+                    onClick={() => setActiveView('operation')}
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <div>GraphQL Operation</div>
+                    </div>
+                  </TabButton>
+                )}
               </div>
             </div>
-            <div className="overflow-y-scroll">
+            <div className="flex-1 overflow-y-scroll">
               {activeView === 'span-attributes' && (
                 <div>
                   {spanAttributes.length > 0 ? (
@@ -1544,6 +1554,16 @@ function SpanSheet(props: SpanSheetProps) {
                   )}
                 </div>
               )}
+              {activeView === 'operation' && (
+                <GraphQLHighlight
+                  height="100%"
+                  options={{
+                    fontSize: 10,
+                    minimap: { enabled: false },
+                  }}
+                  code={span.spanAttributes['graphql.document']}
+                />
+              )}
             </div>
           </div>
         </div>

From 1eebff9a88674eb733f0b8e0acf1c27e87edec18 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 24 Sep 2025 15:53:11 +0200
Subject: [PATCH 088/123] tweak some log

---
 docker/configs/otel-collector/config.yaml |  2 +-
 load-tests/otel-traces/test.ts            | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index 97bd89c69d..b2d88769f8 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -61,7 +61,7 @@ service:
     - health_check
   telemetry:
     logs:
-      level: INFO
+      level: WARN
       encoding: json
       output_paths: ['stdout']
       error_output_paths: ['stderr']
diff --git a/load-tests/otel-traces/test.ts b/load-tests/otel-traces/test.ts
index 6caedf874a..0255a20011 100644
--- a/load-tests/otel-traces/test.ts
+++ b/load-tests/otel-traces/test.ts
@@ -2,6 +2,7 @@ import './bru.ts';
 import { expect } from 'https://jslib.k6.io/k6-testing/0.5.0/index.js';
 import { randomIntBetween, randomString } from 'https://jslib.k6.io/k6-utils/1.2.0/index.js';
 import * as immer from 'https://unpkg.com/immer@10.1.3/dist/immer.mjs';
+import { check } from 'k6';
 import http from 'k6/http';
 
 // prettier-ignore
@@ -11,7 +12,21 @@ globalThis.process = { env: {} };
 const countUniqueErrorCodes = 1_000;
 const countUniqueClients = 1_000;
 const appVersionsPerClient = 1_000;
+
 // Cardinality Variables End
+//
+export const options = {
+  scenarios: {
+    constant_rps: {
+      executor: 'constant-arrival-rate',
+      rate: __ENV.REQUESTS_PER_SECOND ?? 10, // requests per second
+      timeUnit: '1s', // 50 requests per 1 second
+      duration: __ENV.DURATION, // how long to run
+      preAllocatedVUs: 10, // number of VUs to pre-allocate
+      maxVUs: 50, // max number of VUs
+    },
+  },
+};
 
 const otelEndpointUrl = __ENV.OTEL_ENDPOINT || 'http://localhost:4318/v1/traces';
 console.log(
@@ -238,6 +253,7 @@ export default function () {
     },
   });
 
-  console.log('response', response.body);
-  expect(response.status).toBe(200);
+  check(response, {
+    'is status 200': r => r.status === 200,
+  });
 }

From 5a6f74592a05d299a209734cdb97dafa9175edcb Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 24 Sep 2025 16:54:16 +0200
Subject: [PATCH 089/123] inline auth extension

---
 .../otel-collector/builder-config.yaml        |   4 +
 .../extension-hiveauth/config.go              |  28 ++
 .../otel-collector/extension-hiveauth/doc.go  |   7 +
 .../extension-hiveauth/extension.go           | 257 ++++++++++++++++++
 .../extension-hiveauth/factory.go             |  35 +++
 .../generated_component_test.go               |  52 ++++
 .../generated_package_test.go                 |  13 +
 .../otel-collector/extension-hiveauth/go.mod  |  52 ++++
 .../otel-collector/extension-hiveauth/go.sum  | 133 +++++++++
 .../internal/metadata/generated_status.go     |  16 ++
 .../extension-hiveauth/metadata.yaml          |  12 +
 docker/otel-collector.dockerfile              |   2 +
 12 files changed, 611 insertions(+)
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/config.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/doc.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/extension.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/factory.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/generated_component_test.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/generated_package_test.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/go.mod
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/go.sum
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/internal/metadata/generated_status.go
 create mode 100644 docker/configs/otel-collector/extension-hiveauth/metadata.yaml

diff --git a/docker/configs/otel-collector/builder-config.yaml b/docker/configs/otel-collector/builder-config.yaml
index 5bea06230f..79db56bb3b 100644
--- a/docker/configs/otel-collector/builder-config.yaml
+++ b/docker/configs/otel-collector/builder-config.yaml
@@ -27,3 +27,7 @@ extensions:
       v0.122.0
   - gomod:
       github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension cd0c57cf22
+
+replaces:
+  - github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension =>
+    /build/extension-hiveauth
diff --git a/docker/configs/otel-collector/extension-hiveauth/config.go b/docker/configs/otel-collector/extension-hiveauth/config.go
new file mode 100644
index 0000000000..9059ce00eb
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/config.go
@@ -0,0 +1,28 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+package hiveauthextension // import "github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension"
+
+import (
+	"errors"
+	"time"
+)
+
+type Config struct {
+	// Endpoint is the address of the authentication server
+	Endpoint string `mapstructure:"endpoint"`
+	// Timeout is the timeout for the HTTP request to the auth service
+	Timeout time.Duration `mapstructure:"timeout"`
+}
+
+func (cfg *Config) Validate() error {
+	if cfg.Endpoint == "" {
+		return errors.New("missing endpoint")
+	}
+
+	if cfg.Timeout <= 0 {
+		return errors.New("timeout must be a positive value")
+	}
+
+	return nil
+}
diff --git a/docker/configs/otel-collector/extension-hiveauth/doc.go b/docker/configs/otel-collector/extension-hiveauth/doc.go
new file mode 100644
index 0000000000..d011f52b47
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/doc.go
@@ -0,0 +1,7 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+//go:generate mdatagen metadata.yaml
+
+// Package hiveauthextension accepts HTTP requests and forwards them to an external authentication service.
+package hiveauthextension // import "github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension"
diff --git a/docker/configs/otel-collector/extension-hiveauth/extension.go b/docker/configs/otel-collector/extension-hiveauth/extension.go
new file mode 100644
index 0000000000..d89ecb5cf9
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/extension.go
@@ -0,0 +1,257 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+package hiveauthextension
+
+import (
+	"context"
+	"encoding/json"
+	"errors"
+	"fmt"
+	"io"
+	"net/http"
+	"strings"
+	"time"
+
+	"github.com/patrickmn/go-cache"
+	"go.opentelemetry.io/collector/client"
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/extension/extensionauth"
+	"go.uber.org/zap"
+	"golang.org/x/sync/singleflight"
+)
+
+var _ extensionauth.Server = (*hiveAuthExtension)(nil)
+
+var _ client.AuthData = (*authData)(nil)
+
+type authData struct {
+	targetId string
+}
+
+func (a *authData) GetAttribute(name string) any {
+	switch name {
+	case "targetId":
+		return a.targetId
+	default:
+		return nil
+	}
+}
+
+func (*authData) GetAttributeNames() []string {
+	return []string{"targetId"}
+}
+
+type hiveAuthExtension struct {
+	logger *zap.Logger
+	config *Config
+	client *http.Client
+	group  singleflight.Group
+	cache  *cache.Cache
+}
+
+func (h *hiveAuthExtension) Start(_ context.Context, _ component.Host) error {
+	h.logger.Info("Starting hive auth extension", zap.String("endpoint", h.config.Endpoint), zap.Duration("timeout", h.config.Timeout))
+	return nil
+}
+
+func (h *hiveAuthExtension) Shutdown(_ context.Context) error {
+	h.logger.Info("Shutting down hive auth extension")
+	return nil
+}
+
+type AuthStatusError struct {
+	Code int
+	Msg  string
+}
+
+func (e *AuthStatusError) Error() string {
+	return fmt.Sprintf("authentication failed: status %d, %s", e.Code, e.Msg)
+}
+
+func getHeader(h map[string][]string, headerKey string, metadataKey string) string {
+	headerValues, ok := h[headerKey]
+
+	if !ok {
+		headerValues, ok = h[metadataKey]
+	}
+
+	if !ok {
+		for k, v := range h {
+			if strings.EqualFold(k, metadataKey) {
+				headerValues = v
+				break
+			}
+		}
+	}
+
+	if len(headerValues) == 0 {
+		return ""
+	}
+
+	return headerValues[0]
+}
+
+func getAuthHeader(h map[string][]string) string {
+	const (
+		canonicalHeaderKey = "Authorization"
+		metadataKey        = "authorization"
+	)
+
+	return getHeader(h, canonicalHeaderKey, metadataKey)
+}
+
+func getTargetRefHeader(h map[string][]string) string {
+	const (
+		canonicalHeaderKey = "X-Hive-Target-Ref"
+		metadataKey        = "x-hive-target-ref"
+	)
+
+	return getHeader(h, canonicalHeaderKey, metadataKey)
+}
+
+type authResult struct {
+	err      error
+	targetId string
+}
+
+func (h *hiveAuthExtension) doAuthRequest(ctx context.Context, auth string, targetRef string) (string, error) {
+	req, err := http.NewRequestWithContext(ctx, http.MethodGet, h.config.Endpoint, nil)
+	if err != nil {
+		h.logger.Error("failed to create auth request", zap.Error(err))
+		return "", err
+	}
+	req.Header.Set("Authorization", auth)
+	req.Header.Set("X-Hive-Target-Ref", targetRef)
+
+	// Retry parameters.
+	const maxRetries = 3
+	const retryDelay = 100 * time.Millisecond
+	var lastStatus int
+
+	for attempt := 0; attempt < maxRetries; attempt++ {
+		resp, err := h.client.Do(req)
+		if err != nil {
+			h.logger.Error("error calling authentication service", zap.Error(err))
+			return "", err
+		}
+		lastStatus = resp.StatusCode
+
+		// Success.
+		if resp.StatusCode == http.StatusOK {
+			var result struct {
+				TargetId string `json:"targetId"`
+			}
+			body, err := io.ReadAll(resp.Body)
+			resp.Body.Close()
+			if err != nil {
+				return "", err
+			}
+			if err := json.Unmarshal(body, &result); err != nil {
+				return "", err
+			}
+			h.logger.Debug("authentication succeeded", zap.String("targetId", result.TargetId))
+			return result.TargetId, nil
+		}
+
+		// For 5XX responses, retry.
+		if resp.StatusCode >= 500 && resp.StatusCode < 600 {
+			h.logger.Warn("received 5xx response, retrying",
+				zap.Int("attempt", attempt+1),
+				zap.String("status", resp.Status))
+			resp.Body.Close()
+
+			select {
+			case <-time.After(retryDelay):
+				// Continue to next attempt.
+			case <-ctx.Done():
+				return "", ctx.Err()
+			}
+			continue
+		}
+
+		// For non-retryable errors.
+		errMsg := fmt.Sprintf("authentication failed: received status %s", resp.Status)
+		h.logger.Warn(errMsg)
+		resp.Body.Close()
+		return "", &AuthStatusError{
+			Code: resp.StatusCode,
+			Msg:  "non-retryable error",
+		}
+	}
+
+	return "", &AuthStatusError{
+		Code: lastStatus,
+		Msg:  "authentication failed after retries",
+	}
+}
+
+func (h *hiveAuthExtension) Authenticate(ctx context.Context, headers map[string][]string) (context.Context, error) {
+	auth := getAuthHeader(headers)
+	targetRef := getTargetRefHeader(headers)
+	if auth == "" {
+		return ctx, errors.New("No auth provided")
+	}
+
+	if targetRef == "" {
+		return ctx, errors.New("No target ref provided")
+	}
+
+	cacheKey := fmt.Sprintf("%s|%s", auth, targetRef)
+
+	if cached, found := h.cache.Get(cacheKey); found {
+		res := cached.(authResult)
+
+		if res.err == nil {
+			cl := client.FromContext(ctx)
+			cl.Auth = &authData{targetId: res.targetId}
+			return client.NewContext(ctx, cl), nil
+		}
+
+		return ctx, res.err
+	}
+
+	// Deduplicate concurrent calls.
+	targetId, err, _ := h.group.Do(cacheKey, func() (any, error) {
+		return h.doAuthRequest(ctx, auth, targetRef)
+	})
+
+	var ttl time.Duration
+	if err == nil {
+		ttl = 30 * time.Second
+	} else {
+		ttl = 10 * time.Second
+	}
+	h.cache.Set(cacheKey, authResult{err: err, targetId: targetId.(string)}, ttl)
+
+	if err == nil {
+		cl := client.FromContext(ctx)
+		cl.Auth = &authData{targetId: targetId.(string)}
+		return client.NewContext(ctx, cl), nil
+	}
+
+	return ctx, err
+}
+
+func newHiveAuthExtension(
+	logger *zap.Logger,
+	cfg component.Config,
+) (extensionauth.Server, error) {
+	c, ok := cfg.(*Config)
+	if !ok {
+		return nil, errors.New("invalid configuration")
+	}
+
+	if err := c.Validate(); err != nil {
+		return nil, err
+	}
+
+	return &hiveAuthExtension{
+		logger: logger,
+		config: c,
+		client: &http.Client{
+			Timeout: c.Timeout,
+		},
+		cache: cache.New(30*time.Second, time.Minute),
+	}, nil
+}
diff --git a/docker/configs/otel-collector/extension-hiveauth/factory.go b/docker/configs/otel-collector/extension-hiveauth/factory.go
new file mode 100644
index 0000000000..bf83883f54
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/factory.go
@@ -0,0 +1,35 @@
+// Copyright The OpenTelemetry Authors
+// SPDX-License-Identifier: Apache-2.0
+
+package hiveauthextension // import "github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension"
+
+import (
+	"context"
+	"time"
+
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/extension"
+
+	"github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension/internal/metadata"
+)
+
+// NewFactory creates a factory for the static bearer token Authenticator extension.
+func NewFactory() extension.Factory {
+	return extension.NewFactory(
+		metadata.Type,
+		createDefaultConfig,
+		createExtension,
+		metadata.ExtensionStability,
+	)
+}
+
+func createDefaultConfig() component.Config {
+	return &Config{
+		Endpoint: "http://localhost:3000/",
+		Timeout:  5 * time.Second,
+	}
+}
+
+func createExtension(_ context.Context, params extension.Settings, cfg component.Config) (extension.Extension, error) {
+	return newHiveAuthExtension(params.Logger, cfg.(*Config))
+}
diff --git a/docker/configs/otel-collector/extension-hiveauth/generated_component_test.go b/docker/configs/otel-collector/extension-hiveauth/generated_component_test.go
new file mode 100644
index 0000000000..fe32b33d7f
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/generated_component_test.go
@@ -0,0 +1,52 @@
+// Code generated by mdatagen. DO NOT EDIT.
+
+package hiveauthextension
+
+import (
+	"context"
+	"testing"
+
+	"github.com/stretchr/testify/require"
+	"go.opentelemetry.io/collector/component"
+	"go.opentelemetry.io/collector/component/componenttest"
+	"go.opentelemetry.io/collector/confmap/confmaptest"
+	"go.opentelemetry.io/collector/extension/extensiontest"
+)
+
+var typ = component.MustNewType("hiveauth")
+
+func TestComponentFactoryType(t *testing.T) {
+	require.Equal(t, typ, NewFactory().Type())
+}
+
+func TestComponentConfigStruct(t *testing.T) {
+	require.NoError(t, componenttest.CheckConfigStruct(NewFactory().CreateDefaultConfig()))
+}
+
+func TestComponentLifecycle(t *testing.T) {
+	factory := NewFactory()
+
+	cm, err := confmaptest.LoadConf("metadata.yaml")
+	require.NoError(t, err)
+	cfg := factory.CreateDefaultConfig()
+	sub, err := cm.Sub("tests::config")
+	require.NoError(t, err)
+	require.NoError(t, sub.Unmarshal(&cfg))
+	t.Run("shutdown", func(t *testing.T) {
+		e, err := factory.Create(context.Background(), extensiontest.NewNopSettings(typ), cfg)
+		require.NoError(t, err)
+		err = e.Shutdown(context.Background())
+		require.NoError(t, err)
+	})
+	t.Run("lifecycle", func(t *testing.T) {
+		firstExt, err := factory.Create(context.Background(), extensiontest.NewNopSettings(typ), cfg)
+		require.NoError(t, err)
+		require.NoError(t, firstExt.Start(context.Background(), componenttest.NewNopHost()))
+		require.NoError(t, firstExt.Shutdown(context.Background()))
+
+		secondExt, err := factory.Create(context.Background(), extensiontest.NewNopSettings(typ), cfg)
+		require.NoError(t, err)
+		require.NoError(t, secondExt.Start(context.Background(), componenttest.NewNopHost()))
+		require.NoError(t, secondExt.Shutdown(context.Background()))
+	})
+}
diff --git a/docker/configs/otel-collector/extension-hiveauth/generated_package_test.go b/docker/configs/otel-collector/extension-hiveauth/generated_package_test.go
new file mode 100644
index 0000000000..1b6c6798bd
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/generated_package_test.go
@@ -0,0 +1,13 @@
+// Code generated by mdatagen. DO NOT EDIT.
+
+package hiveauthextension
+
+import (
+	"testing"
+
+	"go.uber.org/goleak"
+)
+
+func TestMain(m *testing.M) {
+	goleak.VerifyTestMain(m)
+}
diff --git a/docker/configs/otel-collector/extension-hiveauth/go.mod b/docker/configs/otel-collector/extension-hiveauth/go.mod
new file mode 100644
index 0000000000..081191d83a
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/go.mod
@@ -0,0 +1,52 @@
+module github.com/graphql-hive/console/go/open-telemetry-collector-extension-hiveauth
+
+go 1.23.0
+
+require (
+	github.com/patrickmn/go-cache v2.1.0+incompatible
+	github.com/stretchr/testify v1.10.0
+	go.opentelemetry.io/collector/client v1.28.0
+	go.opentelemetry.io/collector/component v1.28.0
+	go.opentelemetry.io/collector/component/componenttest v0.122.0
+	go.opentelemetry.io/collector/confmap v1.28.0
+	go.opentelemetry.io/collector/extension v1.28.0
+	go.opentelemetry.io/collector/extension/extensionauth v0.122.0
+	go.opentelemetry.io/collector/extension/extensiontest v0.122.0
+	go.uber.org/goleak v1.3.0
+	go.uber.org/zap v1.27.0
+	golang.org/x/sync v0.12.0
+)
+
+require (
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/go-logr/logr v1.4.2 // indirect
+	github.com/go-logr/stdr v1.2.2 // indirect
+	github.com/go-viper/mapstructure/v2 v2.2.1 // indirect
+	github.com/gogo/protobuf v1.3.2 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/hashicorp/go-version v1.7.0 // indirect
+	github.com/knadh/koanf/maps v0.1.1 // indirect
+	github.com/knadh/koanf/providers/confmap v0.1.0 // indirect
+	github.com/knadh/koanf/v2 v2.1.2 // indirect
+	github.com/mitchellh/copystructure v1.2.0 // indirect
+	github.com/mitchellh/reflectwalk v1.0.2 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	go.opentelemetry.io/auto/sdk v1.1.0 // indirect
+	go.opentelemetry.io/collector/featuregate v1.28.0 // indirect
+	go.opentelemetry.io/collector/pdata v1.28.0 // indirect
+	go.opentelemetry.io/otel v1.35.0 // indirect
+	go.opentelemetry.io/otel/metric v1.35.0 // indirect
+	go.opentelemetry.io/otel/sdk v1.35.0 // indirect
+	go.opentelemetry.io/otel/sdk/metric v1.35.0 // indirect
+	go.opentelemetry.io/otel/trace v1.35.0 // indirect
+	go.uber.org/multierr v1.11.0 // indirect
+	golang.org/x/net v0.37.0 // indirect
+	golang.org/x/sys v0.31.0 // indirect
+	golang.org/x/text v0.23.0 // indirect
+	google.golang.org/genproto/googleapis/rpc v0.0.0-20250115164207-1a7da9e5054f // indirect
+	google.golang.org/grpc v1.71.0 // indirect
+	google.golang.org/protobuf v1.36.5 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)
+
+replace github.com/open-telemetry/opentelemetry-collector-contrib/internal/common => ../../internal/common
diff --git a/docker/configs/otel-collector/extension-hiveauth/go.sum b/docker/configs/otel-collector/extension-hiveauth/go.sum
new file mode 100644
index 0000000000..50760323df
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/go.sum
@@ -0,0 +1,133 @@
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/go-logr/logr v1.2.2/go.mod h1:jdQByPbusPIv2/zmleS9BjJVeZ6kBagPoEUsqbVz/1A=
+github.com/go-logr/logr v1.4.2 h1:6pFjapn8bFcIbiKo3XT4j/BhANplGihG6tvd+8rYgrY=
+github.com/go-logr/logr v1.4.2/go.mod h1:9T104GzyrTigFIr8wt5mBrctHMim0Nb2HLGrmQ40KvY=
+github.com/go-logr/stdr v1.2.2 h1:hSWxHoqTgW2S2qGc0LTAI563KZ5YKYRhT3MFKZMbjag=
+github.com/go-logr/stdr v1.2.2/go.mod h1:mMo/vtBO5dYbehREoey6XUKy/eSumjCCveDpRre4VKE=
+github.com/go-viper/mapstructure/v2 v2.2.1 h1:ZAaOCxANMuZx5RCeg0mBdEZk7DZasvvZIxtHqx8aGss=
+github.com/go-viper/mapstructure/v2 v2.2.1/go.mod h1:oJDH3BJKyqBA2TXFhDsKDGDTlndYOZ6rGS0BRZIxGhM=
+github.com/gogo/protobuf v1.3.2 h1:Ov1cvc58UF3b5XjBnZv7+opcTcQFZebYjWzi34vdm4Q=
+github.com/gogo/protobuf v1.3.2/go.mod h1:P1XiOD3dCwIKUDQYPy72D8LYyHL2YPYrpS2s69NZV8Q=
+github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
+github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
+github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
+github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/hashicorp/go-version v1.7.0 h1:5tqGy27NaOTB8yJKUZELlFAS/LTKJkrmONwQKeRZfjY=
+github.com/hashicorp/go-version v1.7.0/go.mod h1:fltr4n8CU8Ke44wwGCBoEymUuxUHl09ZGVZPK5anwXA=
+github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
+github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
+github.com/kisielk/errcheck v1.5.0/go.mod h1:pFxgyoBC7bSaBwPgfKdkLd5X25qrDl4LWUI2bnpBCr8=
+github.com/kisielk/gotool v1.0.0/go.mod h1:XhKaO+MFFWcvkIS/tQcRk01m1F5IRFswLeQ+oQHNcck=
+github.com/knadh/koanf/maps v0.1.1 h1:G5TjmUh2D7G2YWf5SQQqSiHRJEjaicvU0KpypqB3NIs=
+github.com/knadh/koanf/maps v0.1.1/go.mod h1:npD/QZY3V6ghQDdcQzl1W4ICNVTkohC8E73eI2xW4yI=
+github.com/knadh/koanf/providers/confmap v0.1.0 h1:gOkxhHkemwG4LezxxN8DMOFopOPghxRVp7JbIvdvqzU=
+github.com/knadh/koanf/providers/confmap v0.1.0/go.mod h1:2uLhxQzJnyHKfxG927awZC7+fyHFdQkd697K4MdLnIU=
+github.com/knadh/koanf/v2 v2.1.2 h1:I2rtLRqXRy1p01m/utEtpZSSA6dcJbgGVuE27kW2PzQ=
+github.com/knadh/koanf/v2 v2.1.2/go.mod h1:Gphfaen0q1Fc1HTgJgSTC4oRX9R2R5ErYMZJy8fLJBo=
+github.com/kr/pretty v0.3.1 h1:flRD4NNwYAUpkphVc1HcthR4KEIFJ65n8Mw5qdRn3LE=
+github.com/kr/pretty v0.3.1/go.mod h1:hoEshYVHaxMs3cyo3Yncou5ZscifuDolrwPKZanG3xk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/mitchellh/copystructure v1.2.0 h1:vpKXTN4ewci03Vljg/q9QvCGUDttBOGBIa15WveJJGw=
+github.com/mitchellh/copystructure v1.2.0/go.mod h1:qLl+cE2AmVv+CoeAwDPye/v+N2HKCj9FbZEVFJRxO9s=
+github.com/mitchellh/reflectwalk v1.0.2 h1:G2LzWKi524PWgd3mLHV8Y5k7s6XUvT0Gef6zxSIeXaQ=
+github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
+github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/patrickmn/go-cache v2.1.0+incompatible h1:HRMgzkcYKYpi3C8ajMPV8OFXaaRUnok+kx1WdO15EQc=
+github.com/patrickmn/go-cache v2.1.0+incompatible/go.mod h1:3Qf8kWWT7OJRJbdiICTKqZju1ZixQ/KpMGzzAfe6+WQ=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rogpeppe/go-internal v1.13.1 h1:KvO1DLK/DRN07sQ1LQKScxyZJuNnedQ5/wKSR38lUII=
+github.com/rogpeppe/go-internal v1.13.1/go.mod h1:uMEvuHeurkdAXX61udpOXGD/AzZDWNMNyH2VO9fmH0o=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/yuin/goldmark v1.1.27/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+go.opentelemetry.io/auto/sdk v1.1.0 h1:cH53jehLUN6UFLY71z+NDOiNJqDdPRaXzTel0sJySYA=
+go.opentelemetry.io/auto/sdk v1.1.0/go.mod h1:3wSPjt5PWp2RhlCcmmOial7AvC4DQqZb7a7wCow3W8A=
+go.opentelemetry.io/collector/client v1.28.0 h1:QKewiYc5Fc87pViqt8Lav/lQAybMUO4hf1ubV0gqRtg=
+go.opentelemetry.io/collector/client v1.28.0/go.mod h1:mopBD0EZwShVUMjet1ElpzIvOlmVxpJ1r7b7XSr9npg=
+go.opentelemetry.io/collector/component v1.28.0 h1:SQAGxxuyZ+d5tOsuEka8m9oE+wAroaYQpJ8NTIbl6Lk=
+go.opentelemetry.io/collector/component v1.28.0/go.mod h1:te8gbcKU6Mgu7ewo/2VYDSbCkLrhOYYy2llayXCF0bI=
+go.opentelemetry.io/collector/component/componenttest v0.122.0 h1:TxMm4nXB9iByQhDP0QFZwYxG+BFXEB6qUUwVh5YYW7g=
+go.opentelemetry.io/collector/component/componenttest v0.122.0/go.mod h1:zzRftQeGgVPxKzXkJEx3ghC4U3hgiDRuuNljsq3cLPI=
+go.opentelemetry.io/collector/confmap v1.28.0 h1:pUQh4eOW0YQ1GFWTDP5pw/ZMQuppkz6oSoDDloAH/Sc=
+go.opentelemetry.io/collector/confmap v1.28.0/go.mod h1:k/3fo+2RE6m+OKlJzx78Q8hstABYwYgvXO3u9zyTeHI=
+go.opentelemetry.io/collector/consumer v1.28.0 h1:3JzDm7EFAF9ws4O3vVou5n8egdGZtrRN3xVw6AjNtqE=
+go.opentelemetry.io/collector/consumer v1.28.0/go.mod h1:Ge1HGm5aRYTW+SXggM+US9phb/BQR2of4FZ8r/3OH3Y=
+go.opentelemetry.io/collector/extension v1.28.0 h1:E3j6/EtcahF2bX9DvRduLQ6tD7SuZdXM9DzAi7NSAeY=
+go.opentelemetry.io/collector/extension v1.28.0/go.mod h1:3MW9IGCNNgjG/ngkALVH5epwbCwYuoZMTbh4523aYv0=
+go.opentelemetry.io/collector/extension/extensionauth v0.122.0 h1:ypFO+JFrUsxWb2llD50Thyikrigzvac0cJeNh8nRT8M=
+go.opentelemetry.io/collector/extension/extensionauth v0.122.0/go.mod h1:EsGPuDcbOxwku0ebMmtVOm+j8FCdH6yd7lQ6JT/1TXc=
+go.opentelemetry.io/collector/extension/extensiontest v0.122.0 h1:daeCPXhb4HveyeYyX6G0IqjGuvWJprZeiq7pZiSdC+M=
+go.opentelemetry.io/collector/extension/extensiontest v0.122.0/go.mod h1:JXSONLbyuX+uOy1gcQ3Jcp/48pfkh0RiZPy7XkyCBdU=
+go.opentelemetry.io/collector/featuregate v1.28.0 h1:nkaMw0HyOSxojLwlezF2O/xJ9T/Jo1a0iEetesT9lr0=
+go.opentelemetry.io/collector/featuregate v1.28.0/go.mod h1:Y/KsHbvREENKvvN9RlpiWk/IGBK+CATBYzIIpU7nccc=
+go.opentelemetry.io/collector/pdata v1.28.0 h1:xSZyvTOOc2Wmz4PoxrVqeQfodLgs9k7gowLAnzZN0eU=
+go.opentelemetry.io/collector/pdata v1.28.0/go.mod h1:asKE8MD/4SOKz1mCrGdAz4VO2U2HUNg8A6094uK7pq0=
+go.opentelemetry.io/otel v1.35.0 h1:xKWKPxrxB6OtMCbmMY021CqC45J+3Onta9MqjhnusiQ=
+go.opentelemetry.io/otel v1.35.0/go.mod h1:UEqy8Zp11hpkUrL73gSlELM0DupHoiq72dR+Zqel/+Y=
+go.opentelemetry.io/otel/metric v1.35.0 h1:0znxYu2SNyuMSQT4Y9WDWej0VpcsxkuklLa4/siN90M=
+go.opentelemetry.io/otel/metric v1.35.0/go.mod h1:nKVFgxBZ2fReX6IlyW28MgZojkoAkJGaE8CpgeAU3oE=
+go.opentelemetry.io/otel/sdk v1.35.0 h1:iPctf8iprVySXSKJffSS79eOjl9pvxV9ZqOWT0QejKY=
+go.opentelemetry.io/otel/sdk v1.35.0/go.mod h1:+ga1bZliga3DxJ3CQGg3updiaAJoNECOgJREo9KHGQg=
+go.opentelemetry.io/otel/sdk/metric v1.35.0 h1:1RriWBmCKgkeHEhM7a2uMjMUfP7MsOF5JpUCaEqEI9o=
+go.opentelemetry.io/otel/sdk/metric v1.35.0/go.mod h1:is6XYCUMpcKi+ZsOvfluY5YstFnhW0BidkR+gL+qN+w=
+go.opentelemetry.io/otel/trace v1.35.0 h1:dPpEfJu1sDIqruz7BHFG3c7528f6ddfSWfFDVt/xgMs=
+go.opentelemetry.io/otel/trace v1.35.0/go.mod h1:WUk7DtFp1Aw2MkvqGdwiXYDZZNvA/1J8o6xRXLrIkyc=
+go.uber.org/goleak v1.3.0 h1:2K3zAYmnTNqV73imy9J1T3WC+gmCePx2hEGkimedGto=
+go.uber.org/goleak v1.3.0/go.mod h1:CoHD4mav9JJNrW/WLlf7HGZPjdw8EucARQHekz1X6bE=
+go.uber.org/multierr v1.11.0 h1:blXXJkSxSSfBVBlC76pxqeO+LN3aDfLQo+309xJstO0=
+go.uber.org/multierr v1.11.0/go.mod h1:20+QtiLqy0Nd6FdQB9TLXag12DsQkrbs3htMFfDN80Y=
+go.uber.org/zap v1.27.0 h1:aJMhYGrd5QSmlpLMr2MftRKl7t8J8PTZPA732ud/XR8=
+go.uber.org/zap v1.27.0/go.mod h1:GB2qFLM7cTU87MWRP2mPIjqfIDnGu+VIO4V/SdhGo2E=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/mod v0.2.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20200226121028-0de0cce0169b/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/net v0.37.0 h1:1zLorHbz+LYj7MQlSf1+2tPIIgibq2eL5xkrGk6f+2c=
+golang.org/x/net v0.37.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.12.0 h1:MHc5BpPuC30uJk597Ri8TV3CNZcTLu6B6z4lJy+g6Jw=
+golang.org/x/sync v0.12.0/go.mod h1:1dzgHSNfp02xaA81J2MS99Qcpr2w7fw1gpm99rleRqA=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.31.0 h1:ioabZlmFYtWhL+TRYpcnNlLwhyxaM9kWTDEmfnprqik=
+golang.org/x/sys v0.31.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
+golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20200619180055-7c47624df98f/go.mod h1:EkVYQZoAsY45+roYkvgYkIh4xh/qjgUK9TdY2XT94GE=
+golang.org/x/tools v0.0.0-20210106214847-113979e3529a/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20250115164207-1a7da9e5054f h1:OxYkA3wjPsZyBylwymxSHa7ViiW1Sml4ToBrncvFehI=
+google.golang.org/genproto/googleapis/rpc v0.0.0-20250115164207-1a7da9e5054f/go.mod h1:+2Yz8+CLJbIfL9z73EW45avw8Lmge3xVElCP9zEKi50=
+google.golang.org/grpc v1.71.0 h1:kF77BGdPTQ4/JZWMlb9VpJ5pa25aqvVqogsxNHHdeBg=
+google.golang.org/grpc v1.71.0/go.mod h1:H0GRtasmQOh9LkFoCPDu3ZrwUtD1YGE+b2vYBYd/8Ec=
+google.golang.org/protobuf v1.36.5 h1:tPhr+woSbjfYvY6/GPufUoYizxw1cF/yFoxJ2fmpwlM=
+google.golang.org/protobuf v1.36.5/go.mod h1:9fA7Ob0pmnwhb644+1+CVWFRbNajQ6iRojtC/QF5bRE=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
diff --git a/docker/configs/otel-collector/extension-hiveauth/internal/metadata/generated_status.go b/docker/configs/otel-collector/extension-hiveauth/internal/metadata/generated_status.go
new file mode 100644
index 0000000000..19b3cfac8b
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/internal/metadata/generated_status.go
@@ -0,0 +1,16 @@
+// Code generated by mdatagen. DO NOT EDIT.
+
+package metadata
+
+import (
+	"go.opentelemetry.io/collector/component"
+)
+
+var (
+	Type      = component.MustNewType("hiveauth")
+	ScopeName = "github.com/graphql-hive/opentelemetry-collector-contrib/extension/hiveauthextension"
+)
+
+const (
+	ExtensionStability = component.StabilityLevelBeta
+)
diff --git a/docker/configs/otel-collector/extension-hiveauth/metadata.yaml b/docker/configs/otel-collector/extension-hiveauth/metadata.yaml
new file mode 100644
index 0000000000..623738a01e
--- /dev/null
+++ b/docker/configs/otel-collector/extension-hiveauth/metadata.yaml
@@ -0,0 +1,12 @@
+type: hiveauth
+
+status:
+  class: extension
+  stability:
+    beta: [extension]
+  distributions: [contrib, k8s]
+  codeowners:
+    active: [kamilkisiela]
+
+tests:
+  config:
diff --git a/docker/otel-collector.dockerfile b/docker/otel-collector.dockerfile
index 5caf2d8dbe..3b17da2505 100644
--- a/docker/otel-collector.dockerfile
+++ b/docker/otel-collector.dockerfile
@@ -1,6 +1,7 @@
 FROM scratch AS config
 
 COPY builder-config.yaml .
+COPY extension-hiveauth/ ./extension-hiveauth/
 
 FROM golang:1.23.7-bookworm AS builder
 
@@ -12,6 +13,7 @@ RUN go install go.opentelemetry.io/collector/cmd/builder@v${OTEL_VERSION}
 
 # Copy the manifest file and other necessary files
 COPY --from=config builder-config.yaml .
+COPY --from=config extension-hiveauth/ ./extension-hiveauth/
 
 # Build the custom collector
 RUN CGO_ENABLED=0 builder --config=/build/builder-config.yaml

From d893a27939fab1f99b002a36d74f7974245a26f0 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 25 Sep 2025 12:20:31 +0200
Subject: [PATCH 090/123] slight config tweaking

---
 docker/configs/otel-collector/config.yaml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docker/configs/otel-collector/config.yaml b/docker/configs/otel-collector/config.yaml
index b2d88769f8..b36e94d0e4 100644
--- a/docker/configs/otel-collector/config.yaml
+++ b/docker/configs/otel-collector/config.yaml
@@ -22,7 +22,7 @@ receivers:
 processors:
   batch:
     timeout: 5s
-    send_batch_size: 100000
+    send_batch_size: 10000
   attributes:
     actions:
       - key: hive.target_id
@@ -38,7 +38,7 @@ exporters:
     sampling_initial: 5
     sampling_thereafter: 200
   clickhouse:
-    endpoint: ${CLICKHOUSE_PROTOCOL}://${CLICKHOUSE_HOST}:${CLICKHOUSE_PORT}?dial_timeout=10s&compress=lz4
+    endpoint: ${CLICKHOUSE_PROTOCOL}://${CLICKHOUSE_HOST}:${CLICKHOUSE_PORT}?dial_timeout=10s&compress=lz4&async_insert=1
     database: default
     async_insert: true
     username: ${CLICKHOUSE_USERNAME}
@@ -61,7 +61,7 @@ service:
     - health_check
   telemetry:
     logs:
-      level: WARN
+      level: INFO
       encoding: json
       output_paths: ['stdout']
       error_output_paths: ['stderr']
@@ -71,9 +71,9 @@ service:
     traces:
       receivers: [otlp]
       processors:
+        - memory_limiter
         - attributes
         - batch
-        - memory_limiter
       exporters:
         - clickhouse
-        - debug
+        # - debug

From ce365348b20f5840d5151df7554777449fdeee19 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 25 Sep 2025 12:50:46 +0200
Subject: [PATCH 091/123] use unknown everywhere

---
 packages/web/app/src/pages/target-traces.tsx  | 21 +++----------------
 .../src/pages/traces/target-traces-filter.tsx |  6 +++++-
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 8c45fc2f48..3b52fb808b 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1106,24 +1106,14 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         options?.operationType.map(option => ({
           value: option.value === '' ? null : option.value.toUpperCase(),
           searchContent: option.value,
-          label:
-            option.value === '' ? (
-              <span className="text-gray-400">{'<unknown>'}</span>
-            ) : (
-              option.value
-            ),
+          label: option.value,
           count: option.count,
         })) ?? [],
       'graphql.name':
         options?.operationName.map(option => ({
           value: option.value,
           searchContent: option.value,
-          label:
-            option.value === '' ? (
-              <span className="text-gray-400">{'<unknown>'}</span>
-            ) : (
-              option.value
-            ),
+          label: option.value,
           count: option.count,
         })) ?? [],
       'http.status':
@@ -1179,12 +1169,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         options?.clientName.map(option => ({
           value: option.value,
           searchContent: option.value,
-          label:
-            option.value === '' ? (
-              <span className="text-gray-400">{'<unknown>'}</span>
-            ) : (
-              option.value
-            ),
+          label: option.value,
           count: option.count,
         })) ?? [],
     };
diff --git a/packages/web/app/src/pages/traces/target-traces-filter.tsx b/packages/web/app/src/pages/traces/target-traces-filter.tsx
index 33fee7aef0..a5ade91697 100644
--- a/packages/web/app/src/pages/traces/target-traces-filter.tsx
+++ b/packages/web/app/src/pages/traces/target-traces-filter.tsx
@@ -271,7 +271,11 @@ export const MultiSelectFilter = function MultiSelectFilter<$Value>(props: {
               }
             }}
           >
-            {option.label}
+            {option.label === '' ? (
+              <span className="text-gray-400">{'<unknown>'}</span>
+            ) : (
+              option.label
+            )}
           </FilterOption>
         ))}
       </FilterContent>

From a7dda05cd75427f69ab24dce8171203484336a82 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 25 Sep 2025 14:25:54 +0200
Subject: [PATCH 092/123] loading state

---
 packages/web/app/src/pages/target-traces.tsx | 58 +++++++++++++-------
 1 file changed, 37 insertions(+), 21 deletions(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 3b52fb808b..2509816b4a 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -30,6 +30,7 @@ import {
   SidebarInset,
   SidebarProvider,
 } from '@/components/ui/sidebar';
+import { Spinner } from '@/components/ui/spinner';
 import {
   Table,
   TableBody,
@@ -50,6 +51,7 @@ import {
   OnChangeFn,
   useReactTable,
 } from '@tanstack/react-table';
+import * as GraphQLSchema from '../gql/graphql';
 import * as dateMath from '../lib/date-math';
 import {
   CopyIconButton,
@@ -269,6 +271,8 @@ const TracesList = memo(function TracesList(
       traces: FragmentType<typeof TracesList_Trace>[];
       onSelectTraceId: (traceId: string) => void;
       selectedTraceId: string | null;
+      isFetching: boolean;
+      filter: GraphQLSchema.TracesFilterInput;
     },
 ) {
   const router = useRouter();
@@ -579,7 +583,7 @@ const TracesList = memo(function TracesList(
                     <TableHead key={header.id} className="[&:has([role=checkbox])]:pl-3">
                       {header.isPlaceholder
                         ? null
-                        : flexRender(header.column.columnDef.header, header.getContext())}
+                        : flexRender(header.column.columnDef.header, header.getContext())}{' '}
                     </TableHead>
                   );
                 })}
@@ -587,7 +591,15 @@ const TracesList = memo(function TracesList(
             ))}
           </TableHeader>
           <TableBody>
-            {table.getRowModel().rows?.length ? (
+            {props.isFetching ? (
+              <tr>
+                <td colSpan={table.options.columns.length}>
+                  <div className="flex h-24 w-full">
+                    <Spinner className="m-auto" />
+                  </div>
+                </td>
+              </tr>
+            ) : table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map(row => (
                 <TableRow
                   key={row.id}
@@ -1052,6 +1064,26 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     return dateMath.resolveRange({ from: props.filter.period[0], to: props.filter.period[1] });
   }, [props.filter.period]);
 
+  const filter: GraphQLSchema.TracesFilterInput = {
+    period,
+    duration: {
+      min: props.filter.duration?.[0] ?? null,
+      max: props.filter.duration?.[1] ?? null,
+    },
+    traceIds: props.filter['trace.id'],
+    success: props.filter['graphql.status']?.map(status => (status === 'ok' ? true : false)),
+    errorCodes: props.filter['graphql.errorCode'],
+    operationNames: props.filter['graphql.operation'],
+    operationTypes: props.filter['graphql.kind'] as any,
+    clientNames: props.filter['graphql.client'],
+    subgraphNames: props.filter['graphql.subgraph'],
+    httpStatusCodes: props.filter['http.status'],
+    httpMethods: props.filter['http.method'],
+    httpHosts: props.filter['http.host'],
+    httpRoutes: props.filter['http.route'],
+    httpUrls: props.filter['http.url'],
+  };
+
   const [query] = useQuery({
     query: TargetTracesPageQuery,
     variables: {
@@ -1061,25 +1093,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         targetSlug: targetRef.targetSlug,
       },
       filterTopN: 5,
-      filter: {
-        period,
-        duration: {
-          min: props.filter.duration?.[0] ?? null,
-          max: props.filter.duration?.[1] ?? null,
-        },
-        traceIds: props.filter['trace.id'],
-        success: props.filter['graphql.status']?.map(status => (status === 'ok' ? true : false)),
-        errorCodes: props.filter['graphql.errorCode'],
-        operationNames: props.filter['graphql.operation'],
-        operationTypes: props.filter['graphql.kind'] as any,
-        clientNames: props.filter['graphql.client'],
-        subgraphNames: props.filter['graphql.subgraph'],
-        httpStatusCodes: props.filter['http.status'],
-        httpMethods: props.filter['http.method'],
-        httpHosts: props.filter['http.host'],
-        httpRoutes: props.filter['http.route'],
-        httpUrls: props.filter['http.url'],
-      },
+      filter,
       first: props.pagination.pageSize,
     },
   });
@@ -1204,6 +1218,8 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
               traces={traces ?? []}
               onSelectTraceId={setSelectedTraceId}
               selectedTraceId={selectedTraceId}
+              isFetching={query.fetching}
+              filter={filter}
             />
           </div>
         </SidebarInset>

From 5f7bd929c7c249a02f55d4755b25ca3d205085a9 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 25 Sep 2025 18:33:57 +0200
Subject: [PATCH 093/123] feat: pagination

---
 .../modules/operations/providers/traces.ts    | 112 +++++++++---
 .../modules/operations/resolvers/Target.ts    |   3 +-
 packages/web/app/src/lib/urql.ts              |   1 +
 packages/web/app/src/pages/target-traces.tsx  | 171 ++++++++++++++----
 packages/web/app/src/router.tsx               |   5 +-
 5 files changed, 222 insertions(+), 70 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index eb787a6dae..fbd026a0f3 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -114,13 +114,31 @@ export class Traces {
     first: number | null,
     filter: TraceFilter,
     sort: GraphQLSchema.TracesSortInput | null,
+    cursorStr: string | null,
   ) {
+    function createCursor(trace: Trace) {
+      return Buffer.from(
+        JSON.stringify({
+          timestamp: trace.timestamp,
+          traceId: trace.traceId,
+          duration: sort?.sort === 'DURATION' ? trace.duration : undefined,
+        } satisfies z.TypeOf<typeof PaginatedTraceCursorModel>),
+      ).toString('base64');
+    }
+
+    function parseCursor(cursor: string) {
+      const data = PaginatedTraceCursorModel.parse(
+        JSON.parse(Buffer.from(cursor, 'base64').toString('utf8')),
+      );
+      if (sort?.sort === 'DURATION' && !data.duration) {
+        throw new HiveError('Invalid cursor provided.');
+      }
+      return data;
+    }
+
     await this._guardViewerCanAccessTraces(organizationId);
-    const limit = (first ?? 10) + 1;
-    const sqlConditions = buildTraceFilterSQLConditions(filter);
-    const filterSQLFragment = sqlConditions.length
-      ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
-      : sql``;
+    const limit = first ?? 50;
+    const cursor = cursorStr ? parseCursor(cursorStr) : null;
 
     // By default we order by timestamp DESC
     // In case a custom sort is provided, we order by duration asc/desc or timestamp asc
@@ -130,6 +148,46 @@ export class Traces {
       , "trace_id" DESC
     `;
 
+    let paginationSQLFragmentPart = sql``;
+
+    if (cursor) {
+      if (sort?.sort === 'DURATION') {
+        const operator = sort.direction === 'ASC' ? sql`>` : sql`<`;
+        const durationStr = String(cursor.duration);
+        paginationSQLFragmentPart = sql`
+          AND (
+            "duration" ${operator} ${durationStr}
+            OR (
+              "duration" = ${durationStr}
+              AND "timestamp" < ${cursor.timestamp}
+            )
+            OR (
+              "duration" = ${durationStr}
+              AND "timestamp" = ${cursor.timestamp}
+              AND "trace_id" < ${cursor.traceId}
+            )
+          )
+        `;
+      } /* TIMESTAMP */ else {
+        const operator = sort?.direction === 'ASC' ? sql`>` : sql`<`;
+        paginationSQLFragmentPart = sql`
+          AND (
+            (
+               "timestamp" = ${cursor.timestamp}
+               AND "trace_id" < ${cursor.traceId}
+            )
+            OR "timestamp" ${operator} ${cursor.timestamp}
+          )
+        `;
+      }
+    }
+
+    const sqlConditions = buildTraceFilterSQLConditions(filter, false);
+
+    const filterSQLFragment = sqlConditions.length
+      ? sql`AND ${sql.join(sqlConditions, ' AND ')}`
+      : sql``;
+
     const tracesQuery = await this.clickHouse.query<unknown>({
       query: sql`
         SELECT
@@ -138,41 +196,30 @@ export class Traces {
           "otel_traces_normalized"
         WHERE
           target_id = ${targetId}
+          ${paginationSQLFragmentPart}
           ${filterSQLFragment}
         ORDER BY
           ${orderByFragment}
-        LIMIT ${sql.raw(String(limit))}
+        LIMIT ${sql.raw(String(limit + 1))}
       `,
       queryId: 'traces',
       timeout: 10_000,
     });
 
-    const traces = TraceListModel.parse(tracesQuery.data);
-    let hasNext = false;
-
-    if (traces.length == limit) {
-      hasNext = true;
-      (traces as any).pop();
-    }
+    let traces = TraceListModel.parse(tracesQuery.data);
+    const hasNext = traces.length > limit;
+    traces = traces.slice(0, limit);
 
     return {
-      edges: traces.map(trace => {
-        return {
-          node: trace,
-          cursor: Buffer.from(`${trace.timestamp}|${trace.traceId}`).toString('base64'),
-        };
-      }),
+      edges: traces.map(trace => ({
+        node: trace,
+        cursor: createCursor(trace),
+      })),
       pageInfo: {
         hasNextPage: hasNext,
         hasPreviousPage: false,
-        endCursor: traces.length
-          ? Buffer.from(
-              `${traces[traces.length - 1].timestamp}|${traces[traces.length - 1].traceId}`,
-            ).toString('base64')
-          : '',
-        startCursor: traces.length
-          ? Buffer.from(`${traces[0].timestamp}|${traces[0].traceId}`).toString('base64')
-          : '',
+        endCursor: traces.length ? createCursor(traces[traces.length - 1]) : '',
+        startCursor: traces.length ? createCursor(traces[0]) : '',
       },
     };
   }
@@ -325,7 +372,7 @@ type TraceFilter = {
   httpUrls: ReadonlyArray<string> | null;
 };
 
-function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod = false) {
+function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod: boolean) {
   const ANDs: SqlValue[] = [];
 
   if (filter?.period && !skipPeriod) {
@@ -512,3 +559,12 @@ function getBucketUnitAndCount(startDate: Date, endDate: Date): BucketResult {
 
   return { unit, count };
 }
+
+/**
+ * All sortable fields (duration, timestamp), must be part of the cursor
+ */
+const PaginatedTraceCursorModel = z.object({
+  traceId: z.string(),
+  timestamp: z.string(),
+  duration: z.number().optional(),
+});
diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 37130a5f60..5f86e64425 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -78,7 +78,7 @@ export const Target: Pick<
       schemaCoordinate: args.schemaCoordinate,
     };
   },
-  traces: async (target, { first, filter, sort }, { injector }) => {
+  traces: async (target, { first, filter, sort, after }, { injector }) => {
     return injector.get(Traces).findTracesForTargetId(
       target.orgId,
       target.id,
@@ -105,6 +105,7 @@ export const Target: Pick<
         httpUrls: filter?.httpUrls ?? null,
       },
       sort ?? null,
+      after ?? null,
     );
   },
   tracesFilterOptions: async (target, { filter }, { injector }) => {
diff --git a/packages/web/app/src/lib/urql.ts b/packages/web/app/src/lib/urql.ts
index c79a012a99..91da58bfca 100644
--- a/packages/web/app/src/lib/urql.ts
+++ b/packages/web/app/src/lib/urql.ts
@@ -35,6 +35,7 @@ export const urqlClient = createClient({
       resolvers: {
         Target: {
           appDeployments: relayPagination(),
+          traces: relayPagination(),
         },
         AppDeployment: {
           documents: relayPagination(),
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 2509816b4a..fb6a15f9c6 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,9 +1,9 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import { ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
+import { ArrowDown, ArrowUp, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
-import { useQuery } from 'urql';
+import { useClient, useQuery } from 'urql';
 import { z } from 'zod';
 import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
@@ -212,21 +212,19 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
 });
 
 const TargetTracesSortShape = z
-  .array(
-    z.object({
-      desc: z.coerce.boolean(),
-      id: z.string(),
-    }),
-  )
-  .default([
-    {
-      desc: true,
-      id: 'timestamp',
-    },
-  ]);
+  .object({
+    desc: z.coerce.boolean(),
+    id: z.union([z.literal('timestamp'), z.literal('duration')]),
+  })
+  .default({
+    desc: true,
+    id: 'timestamp',
+  });
+
 export const TargetTracesSort = {
   shape: TargetTracesSortShape,
 };
+
 type SortState = z.infer<typeof TargetTracesSortShape>;
 type SortProps = {
   sorting: SortState;
@@ -273,23 +271,28 @@ const TracesList = memo(function TracesList(
       selectedTraceId: string | null;
       isFetching: boolean;
       filter: GraphQLSchema.TracesFilterInput;
+      isFetchingMore: boolean;
+      fetchMore: null | (() => void);
     },
 ) {
   const router = useRouter();
   const data = useFragment(TracesList_Trace, props.traces);
 
-  const onSortingChange = useCallback<OnChangeFn<SortState>>(
+  const onSortingChange = useCallback<
+    OnChangeFn<
+      Array<{
+        id: string;
+        desc: boolean;
+      }>
+    >
+  >(
     updater => {
-      const value = typeof updater === 'function' ? updater(props.sorting) : updater;
-      if (JSON.stringify(value) === JSON.stringify(props.sorting)) {
-        return;
-      }
-
+      const value = typeof updater === 'function' ? updater([props.sorting]) : updater;
       void router.navigate({
         search(params) {
           return {
             ...params,
-            sort: value,
+            sort: value[0] as SortState,
           };
         },
       });
@@ -368,7 +371,15 @@ const TracesList = memo(function TracesList(
               onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
             >
               Timestamp
-              <ArrowUpDown className="ml-2 size-4" />
+              {props.sorting.id === 'timestamp' ? (
+                props.sorting.desc ? (
+                  <ArrowDown className="ml-2 size-4" />
+                ) : (
+                  <ArrowUp className="ml-2 size-4" />
+                )
+              ) : (
+                <ArrowUpDown className="ml-2 size-4" />
+              )}
             </Button>
           );
         },
@@ -474,7 +485,15 @@ const TracesList = memo(function TracesList(
                 onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
               >
                 Duration
-                <ArrowUpDown className="ml-2 size-4" />
+                {props.sorting.id === 'duration' ? (
+                  props.sorting.desc ? (
+                    <ArrowDown className="ml-2 size-4" />
+                  ) : (
+                    <ArrowUp className="ml-2 size-4" />
+                  )
+                ) : (
+                  <ArrowUpDown className="ml-2 size-4" />
+                )}
               </Button>
             </div>
           );
@@ -565,8 +584,9 @@ const TracesList = memo(function TracesList(
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     onPaginationChange,
+    manualPagination: true,
     state: {
-      sorting: props.sorting,
+      sorting: [props.sorting],
       pagination: props.pagination,
     },
   });
@@ -591,7 +611,7 @@ const TracesList = memo(function TracesList(
             ))}
           </TableHeader>
           <TableBody>
-            {props.isFetching ? (
+            {props.isFetching && props.traces.length === 0 ? (
               <tr>
                 <td colSpan={table.options.columns.length}>
                   <div className="flex h-24 w-full">
@@ -599,7 +619,7 @@ const TracesList = memo(function TracesList(
                   </div>
                 </td>
               </tr>
-            ) : table.getRowModel().rows?.length ? (
+            ) : data.length ? (
               table.getRowModel().rows.map(row => (
                 <TableRow
                   key={row.id}
@@ -635,18 +655,12 @@ const TracesList = memo(function TracesList(
           <Button
             variant="outline"
             size="sm"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            Previous
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
+            onClick={() => {
+              props.fetchMore?.();
+            }}
+            disabled={props.isFetchingMore || !props.fetchMore}
           >
-            Next
+            Load more
           </Button>
         </div>
       </div>
@@ -987,18 +1001,19 @@ const TargetTracesPageQuery = graphql(`
     $first: Int!
     $filter: TracesFilterInput
     $filterTopN: Int!
+    $sort: TracesSortInput
   ) {
     target(reference: { bySelector: $targetRef }) {
       id
-      traces(first: $first, filter: $filter) {
+      traces(first: $first, filter: $filter, sort: $sort) {
         edges {
           node {
             ...TracesList_Trace
           }
-          cursor
         }
         pageInfo {
           hasNextPage
+          endCursor
         }
       }
       tracesFilterOptions(filter: $filter) {
@@ -1054,6 +1069,31 @@ const TargetTracesPageQuery = graphql(`
   }
 `);
 
+const TargetTracesFetchMoreTracesQuery = graphql(`
+  query TargetTracesFetchMoreTracesQuery(
+    $targetRef: TargetSelectorInput!
+    $first: Int!
+    $filter: TracesFilterInput
+    $sort: TracesSortInput
+    $after: String!
+  ) {
+    target(reference: { bySelector: $targetRef }) {
+      id
+      traces(first: $first, filter: $filter, sort: $sort, after: $after) {
+        edges {
+          node {
+            ...TracesList_Trace
+          }
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+`);
+
 function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
   const targetRef = useTargetReference();
 
@@ -1084,6 +1124,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     httpUrls: props.filter['http.url'],
   };
 
+  const urql = useClient();
   const [query] = useQuery({
     query: TargetTracesPageQuery,
     variables: {
@@ -1092,12 +1133,23 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         projectSlug: targetRef.projectSlug,
         targetSlug: targetRef.targetSlug,
       },
-      filterTopN: 5,
       filter,
       first: props.pagination.pageSize,
+      sort: {
+        sort:
+          props.sorting.id === 'duration'
+            ? GraphQLSchema.TracesSortType.Duration
+            : GraphQLSchema.TracesSortType.Timestamp,
+        direction: props.sorting.desc
+          ? GraphQLSchema.SortDirectionType.Desc
+          : GraphQLSchema.SortDirectionType.Asc,
+      },
+      filterTopN: 5,
     },
   });
 
+  const [isFetchMore, setIsFetchingMore] = useState(false);
+
   const traces = useMemo(
     () => query.data?.target?.traces.edges.map(e => e.node),
     [query.data?.target?.traces.edges],
@@ -1220,6 +1272,45 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
               selectedTraceId={selectedTraceId}
               isFetching={query.fetching}
               filter={filter}
+              isFetchingMore={isFetchMore}
+              fetchMore={
+                query.data?.target?.traces.pageInfo.hasNextPage
+                  ? () => {
+                      if (
+                        !query.data?.target?.traces.pageInfo.hasNextPage ||
+                        !query.data?.target?.traces.pageInfo.endCursor
+                      ) {
+                        return;
+                      }
+                      setIsFetchingMore(true);
+
+                      urql
+                        .query(TargetTracesFetchMoreTracesQuery, {
+                          targetRef: {
+                            organizationSlug: targetRef.organizationSlug,
+                            projectSlug: targetRef.projectSlug,
+                            targetSlug: targetRef.targetSlug,
+                          },
+                          filter,
+                          first: props.pagination.pageSize,
+                          sort: {
+                            sort:
+                              props.sorting.id === 'duration'
+                                ? GraphQLSchema.TracesSortType.Duration
+                                : GraphQLSchema.TracesSortType.Timestamp,
+                            direction: props.sorting.desc
+                              ? GraphQLSchema.SortDirectionType.Desc
+                              : GraphQLSchema.SortDirectionType.Asc,
+                          },
+                          after: query.data.target.traces.pageInfo.endCursor,
+                        })
+                        .toPromise()
+                        .finally(() => {
+                          setIsFetchingMore(false);
+                        });
+                    }
+                  : null
+              }
             />
           </div>
         </SidebarInset>
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index b567ab6959..c2288bdee7 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -687,7 +687,10 @@ const targetTracesRoute = createRoute({
         duration: [],
         period: [],
       } satisfies FilterState,
-      sort = [],
+      sort = {
+        id: 'timestamp',
+        desc: true,
+      },
       pagination = {
         pageIndex: 0,
         pageSize: 20,

From bf1271e05468959dc20ef1e26433694ff7835189 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 11:17:35 +0200
Subject: [PATCH 094/123] lint

---
 packages/web/app/src/pages/target-trace.tsx  |  7 +++---
 packages/web/app/src/pages/target-traces.tsx | 24 ++++++++++++++++----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 36556c7b89..f638069b88 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -224,6 +224,7 @@ function TreeIcon(props: {
             y1="0"
             y2={index === props.level - 1 && props.isLastChild ? 16 : 32}
             stroke="currentColor"
+            key={`${props.level}_${index}`}
           />
         ) : null,
       )}
@@ -937,9 +938,9 @@ export function TraceSheet(props: TraceSheetProps) {
                               setHighlightedEvent(null);
                             }}
                             className="mb-2 block"
+                            key={event.id}
                           >
                             <ExceptionTeaser
-                              key={event.id}
                               type={String(event.attributes['exception.type'] ?? '')}
                               message={String(event.attributes['exception.message'] ?? '')}
                               stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
@@ -1533,9 +1534,9 @@ function SpanSheet(props: SpanSheetProps) {
                 <div>
                   {span.events.length > 0 ? (
                     <div className="px-1 pt-2">
-                      {span.events.map(event => {
+                      {span.events.map((event, index) => {
                         return (
-                          <div className="mb-2">
+                          <div className="mb-2" key={`${event.name}_${event.date}_${index}`}>
                             <ExceptionTeaser
                               type={event.attributes['exception.type'] ?? ''}
                               message={event.attributes['exception.message'] ?? ''}
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index fb6a15f9c6..41e1627864 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,7 +1,15 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { formatDate, formatISO, parse as parseDate } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
-import { ArrowDown, ArrowUp, ArrowUpDown, Clock, ExternalLinkIcon, XIcon } from 'lucide-react';
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  Clock,
+  ExternalLinkIcon,
+  LoaderCircleIcon,
+  XIcon,
+} from 'lucide-react';
 import { Bar, BarChart, ReferenceArea, XAxis } from 'recharts';
 import { useClient, useQuery } from 'urql';
 import { z } from 'zod';
@@ -660,7 +668,13 @@ const TracesList = memo(function TracesList(
             }}
             disabled={props.isFetchingMore || !props.fetchMore}
           >
-            Load more
+            {props.isFetchingMore ? (
+              <>
+                <LoaderCircleIcon className="mr-2 inline size-4 animate-spin" /> Loading
+              </>
+            ) : (
+              'Load more'
+            )}
           </Button>
         </div>
       </div>
@@ -1148,7 +1162,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     },
   });
 
-  const [isFetchMore, setIsFetchingMore] = useState(false);
+  const [isFetchingMore, setIsFetchingMore] = useState(false);
 
   const traces = useMemo(
     () => query.data?.target?.traces.edges.map(e => e.node),
@@ -1272,7 +1286,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
               selectedTraceId={selectedTraceId}
               isFetching={query.fetching}
               filter={filter}
-              isFetchingMore={isFetchMore}
+              isFetchingMore={isFetchingMore}
               fetchMore={
                 query.data?.target?.traces.pageInfo.hasNextPage
                   ? () => {
@@ -1284,7 +1298,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
                       }
                       setIsFetchingMore(true);
 
-                      urql
+                      void urql
                         .query(TargetTracesFetchMoreTracesQuery, {
                           targetRef: {
                             organizationSlug: targetRef.organizationSlug,

From 0e19c10d07818e94c40494f0c96c903160c92b60 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 12:27:09 +0200
Subject: [PATCH 095/123] feat: page header for traces

---
 .../web/app/src/pages/target-app-version.tsx  | 20 ++----
 packages/web/app/src/pages/target-trace.tsx   | 63 +++++++++++++++----
 packages/web/app/src/pages/target-traces.tsx  | 12 +++-
 3 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/packages/web/app/src/pages/target-app-version.tsx b/packages/web/app/src/pages/target-app-version.tsx
index 639bf79b24..e735c41659 100644
--- a/packages/web/app/src/pages/target-app-version.tsx
+++ b/packages/web/app/src/pages/target-app-version.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import ghost from '../../public/images/figures/ghost.svg?url';
 import { LoaderCircleIcon } from 'lucide-react';
 import { useClient, useQuery } from 'urql';
 import { AppFilter } from '@/components/apps/AppFilter';
+import { NotFoundContent } from '@/components/common/not-found-content';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Button } from '@/components/ui/button';
 import { CardDescription } from '@/components/ui/card';
@@ -157,20 +157,10 @@ function TargetAppVersionContent(props: {
     return (
       <>
         <Meta title="App Version Not found" />
-        <div className="flex h-full flex-1 flex-col items-center justify-center gap-2.5 py-6">
-          <img
-            src={ghost}
-            alt="Ghost illustration"
-            width="200"
-            height="200"
-            className="drag-none"
-          />
-          <h2 className="text-xl font-bold">App Version not found.</h2>
-          <h3 className="font-semibold">This app does not seem to exist anymore.</h3>
-          <Button variant="secondary" className="mt-2" onClick={router.history.back}>
-            Go back
-          </Button>
-        </div>
+        <NotFoundContent
+          heading="App Version not found."
+          subheading="This app does not seem to exist anymore."
+        />
       </>
     );
   }
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index f638069b88..ebb71db25a 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -22,10 +22,13 @@ import {
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { useQuery } from 'urql';
 import { GraphQLHighlight } from '@/components/common/GraphQLSDLBlock';
+import { NotFoundContent } from '@/components/common/not-found-content';
 import { Page, TargetLayout } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { CardDescription } from '@/components/ui/card';
 import { Meta } from '@/components/ui/meta';
+import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import {
@@ -36,6 +39,7 @@ import {
   SheetHeader,
   SheetTitle,
 } from '@/components/ui/sheet';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FragmentType, graphql, useFragment } from '@/gql';
 import { useClipboard } from '@/lib/hooks';
@@ -1010,19 +1014,53 @@ function TargetInsightsNewPageContent(props: {
     },
   });
 
-  if (!result.data?.target?.trace) {
-    return null;
-  }
-
   return (
-    <TraceSheet
-      organizationSlug={props.organizationSlug}
-      projectSlug={props.projectSlug}
-      targetSlug={props.targetSlug}
-      trace={result.data.target.trace}
-      activeSpanId={props.activeSpanId}
-      activeSpanTab={props.activeSpanTab}
-    />
+    <div className="flex h-full flex-col space-y-4 pt-6">
+      <Meta title={`Trace ${props.traceId}`} />
+      <SubPageLayoutHeader
+        subPageTitle={
+          <span className="flex items-center">
+            <Link
+              to="/$organizationSlug/$projectSlug/$targetSlug/traces"
+              params={{
+                organizationSlug: props.organizationSlug,
+                projectSlug: props.projectSlug,
+                targetSlug: props.targetSlug,
+              }}
+            >
+              Traces
+            </Link>{' '}
+            <span className="inline-block px-2 italic text-gray-500">/</span>{' '}
+            {result.data?.target?.trace ? (
+              result.data.target.trace.id
+            ) : (
+              <Skeleton className="inline-block h-5 w-[150px]" />
+            )}
+          </span>
+        }
+        description={
+          <>
+            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
+          </>
+        }
+      />
+      {result.data?.target?.trace && (
+        <TraceSheet
+          organizationSlug={props.organizationSlug}
+          projectSlug={props.projectSlug}
+          targetSlug={props.targetSlug}
+          trace={result.data.target.trace}
+          activeSpanId={props.activeSpanId}
+          activeSpanTab={props.activeSpanTab}
+        />
+      )}
+      {!result.data?.target?.trace && !result.fetching && (
+        <>
+          <Meta title="Trace Not found" />
+          <NotFoundContent heading="Trace not found." subheading="This trace does not exist." />
+        </>
+      )}
+    </div>
   );
 }
 
@@ -1036,7 +1074,6 @@ export function TargetTracePage(props: {
 }) {
   return (
     <>
-      <Meta title={`Trace ${props.traceId}`} />
       <TargetLayout
         organizationSlug={props.organizationSlug}
         projectSlug={props.projectSlug}
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 41e1627864..437e3cec40 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -16,6 +16,7 @@ import { z } from 'zod';
 import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
+import { CardDescription } from '@/components/ui/card';
 import {
   ChartConfig,
   ChartContainer,
@@ -23,6 +24,7 @@ import {
   ChartTooltipContent,
 } from '@/components/ui/chart';
 import { Meta } from '@/components/ui/meta';
+import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { QueryError } from '@/components/ui/query-error';
 import {
   Sheet,
@@ -1267,7 +1269,15 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
 
   return (
     <div className="py-6">
-      <SidebarProvider>
+      <SubPageLayoutHeader
+        subPageTitle="Traces"
+        description={
+          <>
+            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
+          </>
+        }
+      />
+      <SidebarProvider className="mt-4">
         <Sidebar collapsible="none" className="bg-transparent">
           <SidebarContent>
             <Filters filter={props.filter} options={filterOptions} />

From 0f46a3a67701958f8ffcfe811b4809f2c889ec90 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 12:54:31 +0200
Subject: [PATCH 096/123] i got that sticky icky

---
 packages/web/app/src/pages/target-traces.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 437e3cec40..928bb6f9e0 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1278,7 +1278,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         }
       />
       <SidebarProvider className="mt-4">
-        <Sidebar collapsible="none" className="bg-transparent">
+        <Sidebar collapsible="none" className="sticky top-4 bg-transparent">
           <SidebarContent>
             <Filters filter={props.filter} options={filterOptions} />
           </SidebarContent>

From 20b9f1d6ca7c3614874dc5da848d7d2c4af18173 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 14:39:29 +0200
Subject: [PATCH 097/123] improve trace detail view header

---
 .../web/app/src/components/ui/skeleton.tsx    |  7 +-
 packages/web/app/src/index.css                | 10 +-
 packages/web/app/src/pages/target-trace.tsx   | 95 ++++++++++++++-----
 3 files changed, 80 insertions(+), 32 deletions(-)

diff --git a/packages/web/app/src/components/ui/skeleton.tsx b/packages/web/app/src/components/ui/skeleton.tsx
index 8d623a0599..115fd89f1b 100644
--- a/packages/web/app/src/components/ui/skeleton.tsx
+++ b/packages/web/app/src/components/ui/skeleton.tsx
@@ -1,7 +1,12 @@
 import { cn } from '@/lib/utils';
 
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('bg-primary/10 animate-pulse rounded-md', className)} {...props} />;
+  return (
+    <div
+      className={cn('bg-primary/10 animate-pulse rounded-md align-middle', className)}
+      {...props}
+    />
+  );
 }
 
 export { Skeleton };
diff --git a/packages/web/app/src/index.css b/packages/web/app/src/index.css
index b3e68107c1..ae6c7f12da 100644
--- a/packages/web/app/src/index.css
+++ b/packages/web/app/src/index.css
@@ -52,9 +52,6 @@
 
     --chart-1: 173 58% 39%;
     --chart-2: 12 76% 61%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
   }
 
   .dark {
@@ -102,9 +99,6 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     --chart-1: 220 70% 50%;
-    --chart-5: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
     --chart-2: 340 75% 55%;
   }
 }
@@ -114,6 +108,10 @@
     @apply border-border;
   }
 
+  html {
+    @apply bg-[#030711];
+  }
+
   body {
     @apply text-foreground bg-[#030711];
     font-feature-settings:
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index ebb71db25a..cf3ab8dac8 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from 'react';
+import { formatDate } from 'date-fns';
 import {
   AlertTriangle,
   ArrowUp,
@@ -994,6 +995,31 @@ export function TraceSheet(props: TraceSheetProps) {
   );
 }
 
+const TargetInsightsNewPageContent_TraceQuery = graphql(/* GraphQL */ `
+  query TargetInsightsNewPageContent_TraceQuery(
+    $targetSelector: TargetSelectorInput!
+    $traceId: ID!
+  ) {
+    target(reference: { bySelector: $targetSelector }) {
+      id
+      trace(traceId: $traceId) {
+        ...TraceSheet_TraceFragment
+        id
+        operationName
+        duration
+        success
+        timestamp
+        spans {
+          id
+          name
+          parentId
+          ...SpanFragment
+        }
+      }
+    }
+  }
+`);
+
 function TargetInsightsNewPageContent(props: {
   organizationSlug: string;
   projectSlug: string;
@@ -1003,7 +1029,7 @@ function TargetInsightsNewPageContent(props: {
   activeSpanTab: string | null;
 }) {
   const [result] = useQuery({
-    query: TargetTraceQuery,
+    query: TargetInsightsNewPageContent_TraceQuery,
     variables: {
       targetSelector: {
         organizationSlug: props.organizationSlug,
@@ -1014,6 +1040,8 @@ function TargetInsightsNewPageContent(props: {
     },
   });
 
+  const trace = result.data?.target?.trace;
+
   return (
     <div className="flex h-full flex-col space-y-4 pt-6">
       <Meta title={`Trace ${props.traceId}`} />
@@ -1031,8 +1059,13 @@ function TargetInsightsNewPageContent(props: {
               Traces
             </Link>{' '}
             <span className="inline-block px-2 italic text-gray-500">/</span>{' '}
-            {result.data?.target?.trace ? (
-              result.data.target.trace.id
+            {trace ? (
+              <>
+                {trace.operationName ?? <span className="text-gray-400">{'<unknown>'}</span>}
+                <span className="text-muted-foreground ml-2 font-mono font-normal">
+                  {trace.id.substring(0, 4)}
+                </span>
+              </>
             ) : (
               <Skeleton className="inline-block h-5 w-[150px]" />
             )}
@@ -1040,21 +1073,51 @@ function TargetInsightsNewPageContent(props: {
         }
         description={
           <>
-            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
+            <CardDescription>
+              Trace ID:{' '}
+              {trace?.id ? (
+                <>
+                  <span className="font-mono"> {trace.id}</span>
+                  <CopyIconButton value={trace.id} label="Copy Trace ID" />
+                </>
+              ) : (
+                <Skeleton className="inline-block h-4 w-[200px]" />
+              )}
+            </CardDescription>
+            {trace && (
+              <div className="mt-2 flex items-center gap-3 text-xs">
+                <div className="flex items-center gap-1">
+                  <Clock className="size-3 text-gray-400" />
+                  <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
+                </div>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    'rounded-sm border-0 px-1 font-medium uppercase',
+                    trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+                  )}
+                >
+                  {trace.success ? 'Ok' : 'Error'}
+                </Badge>
+                <span className="font-mono uppercase text-gray-300">
+                  {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
+                </span>
+              </div>
+            )}
           </>
         }
       />
-      {result.data?.target?.trace && (
+      {trace && (
         <TraceSheet
           organizationSlug={props.organizationSlug}
           projectSlug={props.projectSlug}
           targetSlug={props.targetSlug}
-          trace={result.data.target.trace}
+          trace={trace}
           activeSpanId={props.activeSpanId}
           activeSpanTab={props.activeSpanTab}
         />
       )}
-      {!result.data?.target?.trace && !result.fetching && (
+      {!trace && !result.fetching && (
         <>
           <Meta title="Trace Not found" />
           <NotFoundContent heading="Trace not found." subheading="This trace does not exist." />
@@ -1095,24 +1158,6 @@ export function TargetTracePage(props: {
   );
 }
 
-const TargetTraceQuery = graphql(/* GraphQL */ `
-  query TargetTraceQuery($targetSelector: TargetSelectorInput!, $traceId: ID!) {
-    target(reference: { bySelector: $targetSelector }) {
-      id
-      trace(traceId: $traceId) {
-        ...TraceSheet_TraceFragment
-        id
-        spans {
-          id
-          name
-          parentId
-          ...SpanFragment
-        }
-      }
-    }
-  }
-`);
-
 const SpanFragment = graphql(/* GraphQL */ `
   fragment SpanFragment on Span {
     id

From 497a97145fc41122fb7f72a2d6df17e43c28e255 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 16:22:07 +0200
Subject: [PATCH 098/123] 404 component not found

---
 .../components/common/not-found-content.tsx    | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 packages/web/app/src/components/common/not-found-content.tsx

diff --git a/packages/web/app/src/components/common/not-found-content.tsx b/packages/web/app/src/components/common/not-found-content.tsx
new file mode 100644
index 0000000000..cf4221dc76
--- /dev/null
+++ b/packages/web/app/src/components/common/not-found-content.tsx
@@ -0,0 +1,18 @@
+import ghost from '../../../public/images/figures/ghost.svg?url';
+import { useRouter } from '@tanstack/react-router';
+import { Button } from '../ui/button';
+
+export function NotFoundContent(props: { heading: React.ReactNode; subheading: React.ReactNode }) {
+  const router = useRouter();
+
+  return (
+    <div className="flex h-full flex-1 flex-col items-center justify-center gap-2.5 py-6">
+      <img src={ghost} alt="Ghost illustration" width="200" height="200" className="drag-none" />
+      <h2 className="text-xl font-bold">{props.heading}</h2>
+      <h3 className="font-semibold">{props.subheading}</h3>
+      <Button variant="secondary" className="mt-2" onClick={router.history.back}>
+        Go back
+      </Button>
+    </div>
+  );
+}

From 8b7b0807f6461b5a09301c9c22706a5e89539b4c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 16:34:48 +0200
Subject: [PATCH 099/123] lint

---
 packages/web/app/src/pages/target-app-version.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-app-version.tsx b/packages/web/app/src/pages/target-app-version.tsx
index e735c41659..a327807819 100644
--- a/packages/web/app/src/pages/target-app-version.tsx
+++ b/packages/web/app/src/pages/target-app-version.tsx
@@ -30,7 +30,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { graphql } from '@/gql';
 import { useRedirect } from '@/lib/access/common';
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { Link, useRouter } from '@tanstack/react-router';
+import { Link } from '@tanstack/react-router';
 
 const TargetAppsVersionQuery = graphql(`
   query TargetAppsVersionQuery(

From a7b333ef0b6d0798ca8b6531a665128bff05e7a9 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 26 Sep 2025 18:15:43 +0200
Subject: [PATCH 100/123] improve bucket selection script

---
 .../modules/operations/providers/traces.ts    | 117 ++++++++++--------
 1 file changed, 65 insertions(+), 52 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index fbd026a0f3..e692b15f1d 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -238,32 +238,35 @@ export class Traces {
     const endDate = filter.period?.to ?? new Date();
     const startDate = filter.period?.from ?? subDays(endDate, 14);
 
-    const { unit, count: rangeUnits } = getBucketUnitAndCount(startDate, endDate);
-
-    const bucketFunctionName = {
-      minutes: 'MINUTE',
-      hours: 'HOUR',
-      days: 'DAY',
-      weeks: 'WEEK',
-      months: 'MONTH',
-    };
+    const d = getBucketUnitAndCountNew(startDate, endDate);
 
+    const [countStr, unit] = d.candidate.name.split(' ');
     const bucketStepFunctionName = {
-      minutes: 'addMinutes',
-      hours: 'addHours',
-      days: 'addDays',
-      weeks: 'addWeeks',
-      months: 'addMonths',
+      MINUTE: 'addMinutes',
+      HOUR: 'addHours',
+      DAY: 'addDays',
+      WEEK: 'addWeeks',
+      MONTH: 'addMonths',
     };
 
+    const addIntervalFn = sql.raw(
+      bucketStepFunctionName[unit as keyof typeof bucketStepFunctionName],
+    );
+
     const result = await this.clickHouse.query<unknown>({
       query: sql`
         WITH "time_bucket_list" AS (
           SELECT
-            ${sql.raw(bucketStepFunctionName[unit])}(toStartOfInterval(toDateTime(${formatDate(startDate)}, 'UTC'), INTERVAL 1 ${sql.raw(bucketFunctionName[unit])}), "number" + 1) AS "time_bucket"
+            ${addIntervalFn}(
+              toStartOfInterval(
+                toDateTime(${formatDate(startDate)}, 'UTC')
+                , INTERVAL ${sql.raw(d.candidate.name)}
+              )
+              , "number" * ${sql.raw(countStr)}
+            ) AS "time_bucket"
           FROM
             "system"."numbers"
-          WHERE "system"."numbers"."number" < ${String(rangeUnits)}
+          WHERE "system"."numbers"."number" < ${String(d.buckets)}
         )
         SELECT
           replaceOne(concat(toDateTime64("time_bucket_list"."time_bucket", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucket"
@@ -276,7 +279,7 @@ export class Traces {
         LEFT JOIN
         (
           SELECT
-            toStartOfInterval("timestamp", INTERVAL 1 ${sql.raw(bucketFunctionName[unit])}) AS "time_bucket"
+            toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) AS "time_bucket"
             , sumIf(1, "graphql_error_count" = 0) AS "ok_count_total"
             , sumIf(1, "graphql_error_count" != 0) AS "error_count_total"
             , sumIf(1, "graphql_error_count" = 0 ${filterSQLFragment}) AS "ok_count_filtered"
@@ -288,11 +291,11 @@ export class Traces {
             AND "otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(startDate)}, 'UTC')
             AND "otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(endDate)}, 'UTC')
           GROUP BY
-          "time_bucket"
+            "time_bucket"
           ) AS "t"
         ON "t"."time_bucket" = "time_bucket_list"."time_bucket"
       `,
-      queryId: `trace_status_breakdown_for_target_id_${unit}_${rangeUnits}`,
+      queryId: `trace_status_breakdown_for_target_id_`,
       timeout: 10_000,
     });
 
@@ -519,45 +522,55 @@ export type Span = z.TypeOf<typeof SpanModel>;
 type BucketResult = {
   unit: 'minutes' | 'hours' | 'days' | 'weeks' | 'months';
   count: number;
+  interval: number;
+};
+
+type BucketCandidate = {
+  name: string;
+  seconds: number;
 };
 
-function getBucketUnitAndCount(startDate: Date, endDate: Date): BucketResult {
-  const MS_IN = {
-    minute: 60 * 1000,
-    hour: 60 * 60 * 1000,
-    day: 24 * 60 * 60 * 1000,
-    week: 7 * 24 * 60 * 60 * 1000,
+const bucketCanditates: Array<BucketCandidate> = [
+  {
+    name: '1 MINUTE',
+    seconds: 60,
+  },
+  {
+    name: '5 MINUTE',
+    seconds: 60 * 5,
+  },
+  { name: '1 HOUR', seconds: 60 * 60 },
+  { name: '4 HOUR', seconds: 60 * 60 * 4 },
+  { name: '6 HOUR', seconds: 60 * 60 * 6 },
+  { name: '1 DAY', seconds: 60 * 60 * 24 },
+  { name: '1 WEEK', seconds: 60 * 60 * 24 * 7 },
+  { name: '1 MONTH', seconds: 60 * 60 * 24 * 30 },
+];
+
+function getBucketUnitAndCountNew(startDate: Date, endDate: Date, targetBuckets: number = 50) {
+  const diffSeconds = Math.floor((endDate.getTime() - startDate.getTime()) / 1000);
+
+  let best = {
+    candidate: bucketCanditates[0],
+    buckets: Math.floor(diffSeconds / bucketCanditates[0].seconds),
   };
 
-  const diffMs = endDate.getTime() - startDate.getTime();
-  const diffMinutes = diffMs / MS_IN.minute;
-
-  let unit: BucketResult['unit'];
-  let count: BucketResult['count'];
-
-  if (diffMinutes <= 60) {
-    unit = 'minutes';
-    count = Math.ceil(diffMs / MS_IN.minute);
-  } else if (diffMinutes <= 60 * 24) {
-    unit = 'hours';
-    count = Math.ceil(diffMs / MS_IN.hour);
-  } else if (diffMinutes <= 60 * 24 * 30) {
-    unit = 'days';
-    count = Math.ceil(diffMs / MS_IN.day);
-  } else if (diffMinutes <= 60 * 24 * 30 * 90) {
-    unit = 'weeks';
-    count = Math.ceil(diffMs / MS_IN.week);
-  } else {
-    unit = 'months';
-    // Calculate full months difference:
-    const startYear = startDate.getFullYear();
-    const startMonth = startDate.getMonth();
-    const endYear = endDate.getFullYear();
-    const endMonth = endDate.getMonth();
-    count = (endYear - startYear) * 12 + (endMonth - startMonth) + 1;
+  let bestDiff = Number.POSITIVE_INFINITY;
+
+  for (const candidate of bucketCanditates) {
+    const buckets = Math.floor(diffSeconds / candidate.seconds);
+
+    const diff = Math.abs(buckets - targetBuckets);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = {
+        candidate,
+        buckets,
+      };
+    }
   }
 
-  return { unit, count };
+  return best;
 }
 
 /**

From 5650d06abeba1f9a645d343ce88b33970c40b978 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 30 Sep 2025 11:46:33 +0200
Subject: [PATCH 101/123] improve buckets

---
 .../src/modules/operations/module.graphql.ts  |   6 +-
 .../modules/operations/providers/traces.ts    |  15 ++-
 packages/web/app/src/lib/urql.ts              |   4 +
 packages/web/app/src/pages/target-trace.tsx   |   3 +-
 packages/web/app/src/pages/target-traces.tsx  | 127 +++++++++++-------
 5 files changed, 99 insertions(+), 56 deletions(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index b03c68ef50..a4eb6d2e3a 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -447,7 +447,11 @@ export default gql`
     """
     The time bucket for the data
     """
-    timeBucket: DateTime!
+    timeBucketStart: DateTime!
+    """
+    The end of the time bucket for the data
+    """
+    timeBucketEnd: DateTime!
     """
     Total amount of ok traces in the bucket.
     """
diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index e692b15f1d..dab48ef73e 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -241,6 +241,7 @@ export class Traces {
     const d = getBucketUnitAndCountNew(startDate, endDate);
 
     const [countStr, unit] = d.candidate.name.split(' ');
+
     const bucketStepFunctionName = {
       MINUTE: 'addMinutes',
       HOUR: 'addHours',
@@ -269,7 +270,8 @@ export class Traces {
           WHERE "system"."numbers"."number" < ${String(d.buckets)}
         )
         SELECT
-          replaceOne(concat(toDateTime64("time_bucket_list"."time_bucket", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucket"
+          replaceOne(concat(toDateTime64("time_bucket_list"."time_bucket", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucketStart"
+          , replaceOne(concat(toDateTime64("t"."time_bucket_end", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucketEnd"
           , coalesce("t"."ok_count_total", 0) as "okCountTotal"
           , coalesce("t"."error_count_total", 0) as "errorCountTotal"
           , coalesce("t"."ok_count_filtered", 0) as "okCountFiltered"
@@ -279,7 +281,8 @@ export class Traces {
         LEFT JOIN
         (
           SELECT
-            toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) AS "time_bucket"
+            toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) AS "time_bucket_start"
+            , toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) + INTERVAL ${sql.raw(d.candidate.name)} - INTERVAL 1 SECOND AS "time_bucket_end"
             , sumIf(1, "graphql_error_count" = 0) AS "ok_count_total"
             , sumIf(1, "graphql_error_count" != 0) AS "error_count_total"
             , sumIf(1, "graphql_error_count" = 0 ${filterSQLFragment}) AS "ok_count_filtered"
@@ -291,9 +294,10 @@ export class Traces {
             AND "otel_traces_normalized"."timestamp" >= toDateTime(${formatDate(startDate)}, 'UTC')
             AND "otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(endDate)}, 'UTC')
           GROUP BY
-            "time_bucket"
+            "time_bucket_start"
+            , "time_bucket_end"
           ) AS "t"
-        ON "t"."time_bucket" = "time_bucket_list"."time_bucket"
+        ON "t"."time_bucket_start" = "time_bucket_list"."time_bucket"
       `,
       queryId: `trace_status_breakdown_for_target_id_`,
       timeout: 10_000,
@@ -467,7 +471,8 @@ function buildTraceFilterSQLConditions(filter: TraceFilter, skipPeriod: boolean)
 const IntFromString = z.string().transform(value => parseInt(value, 10));
 
 const TraceStatusBreakdownBucket = z.object({
-  timeBucket: z.string(),
+  timeBucketStart: z.string(),
+  timeBucketEnd: z.string(),
   okCountTotal: IntFromString,
   errorCountTotal: IntFromString,
   okCountFiltered: IntFromString,
diff --git a/packages/web/app/src/lib/urql.ts b/packages/web/app/src/lib/urql.ts
index 91da58bfca..194f09a6ae 100644
--- a/packages/web/app/src/lib/urql.ts
+++ b/packages/web/app/src/lib/urql.ts
@@ -78,6 +78,10 @@ export const urqlClient = createClient({
         MetadataAttribute: noKey,
         RateLimit: noKey,
         DeprecatedSchemaExplorer: noKey,
+        TraceStatusBreakdownBucket: noKey,
+        FilterStringOption: noKey,
+        FilterBooleanOption: noKey,
+        TracesFilterOptions: noKey,
       },
       globalIDs: ['SuccessfulSchemaCheck', 'FailedSchemaCheck'],
     }),
diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index cf3ab8dac8..75e9784b3c 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -672,7 +672,6 @@ function SpanNode(props: SpanNodeProps) {
                   >
                     <div className="z-20">
                       <ExceptionTeaser
-                        key={event.id}
                         type={String(event.attributes['exception.type'] ?? '')}
                         message={String(event.attributes['exception.message'] ?? '')}
                         stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
@@ -700,7 +699,7 @@ function SpanNode(props: SpanNodeProps) {
               const isLastChild = i === arr.length - 1;
               return (
                 <SpanNode
-                  key={span.id}
+                  key={uchildSpan.id}
                   span={childSpan}
                   highlightedServiceName={props.highlightedServiceName}
                   leftPanelWidth={props.leftPanelWidth}
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 928bb6f9e0..9f2ec4bb1e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -40,6 +40,7 @@ import {
   SidebarInset,
   SidebarProvider,
 } from '@/components/ui/sidebar';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Spinner } from '@/components/ui/spinner';
 import {
   Table,
@@ -92,7 +93,8 @@ const chartConfig = {
 
 const Traffic_TracesStatusBreakdownBucketFragment = graphql(`
   fragment Traffic_TracesStatusBreakdownBucketFragment on TraceStatusBreakdownBucket {
-    timeBucket
+    timeBucketStart
+    timeBucketEnd
     okCountTotal
     errorCountTotal
     okCountFiltered
@@ -110,7 +112,8 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
     ok: b.okCountFiltered,
     error: b.errorCountFiltered,
     remaining: b.okCountTotal + b.errorCountTotal - b.okCountFiltered - b.errorCountFiltered,
-    timeBucket: b.timeBucket.substring(0, 10),
+    timeBucketStart: b.timeBucketStart,
+    timeBucketEnd: b.timeBucketEnd,
   }));
   const [refAreaLeft, setRefAreaLeft] = useState<string | null>(null);
   const [refAreaRight, setRefAreaRight] = useState<string | null>(null);
@@ -168,6 +171,17 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
     setIsSelecting(false);
   }, [refAreaLeft, refAreaRight, navigate]);
 
+  function formatDate(str: string) {
+    return new Date(str).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short', // e.g., "Sep"
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false, // 24-hour format; set true for AM/PM
+    });
+  }
+
   return (
     <ChartContainer
       config={chartConfig}
@@ -183,29 +197,29 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
         data={data}
       >
         <XAxis
-          dataKey="timeBucket"
+          dataKey="timeBucketStart"
           tickLine={false}
           axisLine={false}
           tickMargin={8}
           minTickGap={32}
-          tickFormatter={value => {
-            const date = new Date(value);
-            return date.toLocaleDateString('en-US', {
-              month: 'short',
-              day: 'numeric',
-            });
+          tickFormatter={date => {
+            return formatDate(date);
           }}
         />
         <ChartTooltip
           content={
             <ChartTooltipContent
               className="w-[150px]"
-              labelFormatter={value => {
-                return new Date(value).toLocaleDateString('en-US', {
-                  month: 'short',
-                  day: 'numeric',
-                  year: 'numeric',
-                });
+              labelFormatter={(_, data) => {
+                const payload = data[0]?.payload;
+
+                if (!payload) {
+                  return null;
+                }
+
+                return (
+                  formatDate(payload.timeBucketStart) + ' - ' + formatDate(payload.timeBucketEnd)
+                );
               }}
             />
           }
@@ -948,38 +962,55 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
 
   return (
     <SheetContent className="border-l border-gray-800 bg-black p-0 text-white md:max-w-[50%]">
-      {trace && (
-        <SheetHeader className="relative border-b border-gray-800 p-4">
-          <div className="flex items-center justify-between">
-            <SheetTitle className="text-lg font-medium text-white">
-              {trace?.operationName ?? <span className="text-gray-400">{'<unknown>'}</span>}
-              <span className="text-muted-foreground ml-2 font-mono font-normal">
-                {trace.id.substring(0, 4)}
+      <SheetHeader className="relative border-b border-gray-800 p-4">
+        <div className="flex items-center justify-between">
+          <SheetTitle className="text-lg font-medium text-white">
+            {trace ? (
+              <>
+                {trace.operationName ?? <span className="text-gray-400">{'<unknown>'}</span>}
+                <span className="text-muted-foreground ml-2 font-mono font-normal">
+                  {trace.id.substring(0, 4)}
+                </span>
+              </>
+            ) : (
+              <Skeleton className="inline-block h-5 w-[260px]" />
+            )}
+          </SheetTitle>
+        </div>
+        <SheetDescription className="mt-1 text-xs text-gray-400">
+          Trace ID:{' '}
+          {trace?.id ? (
+            <>
+              <span className="font-mono"> {trace.id}</span>
+              <CopyIconButton value={trace.id} label="Copy Trace ID" />
+            </>
+          ) : (
+            <Skeleton className="inline-block h-4 w-[200px]" />
+          )}
+        </SheetDescription>
+        <div className="mt-2 flex items-center gap-3 text-xs">
+          {trace ? (
+            <>
+              <div className="flex items-center gap-1">
+                <Clock className="size-3 text-gray-400" />
+                <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
+              </div>
+              <Badge
+                variant="outline"
+                className={cn(
+                  'rounded-sm border-0 px-1 font-medium uppercase',
+                  trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
+                )}
+              >
+                {trace.success ? 'Ok' : 'Error'}
+              </Badge>
+              <span className="font-mono uppercase text-gray-300">
+                {trace ? formatDate(trace.timestamp, 'MMM dd HH:mm:ss') : null}
               </span>
-            </SheetTitle>
-          </div>
-          <SheetDescription className="mt-1 text-xs text-gray-400">
-            Trace ID: <span className="font-mono">{trace.id}</span>
-            <CopyIconButton value={trace.id} label="Copy Trace ID" />
-          </SheetDescription>
-          <div className="mt-2 flex items-center gap-3 text-xs">
-            <div className="flex items-center gap-1">
-              <Clock className="size-3 text-gray-400" />
-              <span className="text-gray-300">{formatNanoseconds(BigInt(trace.duration))}</span>
-            </div>
-            <Badge
-              variant="outline"
-              className={cn(
-                'rounded-sm border-0 px-1 font-medium uppercase',
-                trace.success ? 'bg-green-900/30 text-green-400' : 'bg-red-900/30 text-red-400',
-              )}
-            >
-              {trace.success ? 'Ok' : 'Error'}
-            </Badge>
-            <span className="font-mono uppercase text-gray-300">
-              {formatDate(trace.timestamp, 'MMM dd HH:mm:ss')}
-            </span>
-          </div>
+            </>
+          ) : (
+            <Skeleton className="inline-block h-4 w-[150px]" />
+          )}
           <Button asChild variant="outline" size="sm">
             <Link
               to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
@@ -995,8 +1026,8 @@ function SelectedTraceSheet(props: SelectedTraceSheetProps) {
               Full Trace
             </Link>
           </Button>
-        </SheetHeader>
-      )}
+        </div>
+      </SheetHeader>
       {trace && (
         <ImportedTraceSheet
           activeSpanId={null}

From 796daae0f731af2a21f8fc5deeb85169732ec373 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 13:19:48 +0200
Subject: [PATCH 102/123] time bucket end

---
 .../api/src/modules/operations/providers/traces.ts   | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index dab48ef73e..4d9b1bc3b8 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -271,7 +271,15 @@ export class Traces {
         )
         SELECT
           replaceOne(concat(toDateTime64("time_bucket_list"."time_bucket", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucketStart"
-          , replaceOne(concat(toDateTime64("t"."time_bucket_end", 9, 'UTC'), 'Z'), ' ', 'T') AS "timeBucketEnd"
+          , replaceOne(concat(
+              toDateTime64(
+                "time_bucket_list"."time_bucket"
+                  + INTERVAL ${sql.raw(d.candidate.name)}
+                  - INTERVAL 1 SECOND
+                , 9
+                , 'UTC'
+              ) , 'Z') , ' ' , 'T'
+            ) AS "timeBucketEnd"
           , coalesce("t"."ok_count_total", 0) as "okCountTotal"
           , coalesce("t"."error_count_total", 0) as "errorCountTotal"
           , coalesce("t"."ok_count_filtered", 0) as "okCountFiltered"
@@ -282,7 +290,6 @@ export class Traces {
         (
           SELECT
             toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) AS "time_bucket_start"
-            , toStartOfInterval("timestamp", INTERVAL ${sql.raw(d.candidate.name)}) + INTERVAL ${sql.raw(d.candidate.name)} - INTERVAL 1 SECOND AS "time_bucket_end"
             , sumIf(1, "graphql_error_count" = 0) AS "ok_count_total"
             , sumIf(1, "graphql_error_count" != 0) AS "error_count_total"
             , sumIf(1, "graphql_error_count" = 0 ${filterSQLFragment}) AS "ok_count_filtered"
@@ -295,7 +302,6 @@ export class Traces {
             AND "otel_traces_normalized"."timestamp" <= toDateTime(${formatDate(endDate)}, 'UTC')
           GROUP BY
             "time_bucket_start"
-            , "time_bucket_end"
           ) AS "t"
         ON "t"."time_bucket_start" = "time_bucket_list"."time_bucket"
       `,

From d026bcd8aef7550c516c8536e5e47c643b4ea8f7 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 13:20:06 +0200
Subject: [PATCH 103/123] interval

---
 scripts/seed-traces/seed-traces.mts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/seed-traces/seed-traces.mts b/scripts/seed-traces/seed-traces.mts
index 6acefeaa8d..c9fc3c074e 100644
--- a/scripts/seed-traces/seed-traces.mts
+++ b/scripts/seed-traces/seed-traces.mts
@@ -752,7 +752,7 @@ const USAGE_DAYS = process.env.USAGE_DAYS || '14';
 console.log(
   `Seeding usage for the last ${USAGE_DAYS} day(s). (Overwrite using the USAGE_DAYS environment variable)`,
 );
-const USAGE_INTERVAL = process.env.USAGE_INTERVAL || '20';
+const USAGE_INTERVAL = process.env.USAGE_INTERVAL || '1';
 console.log(
   `Seeding every ${USAGE_INTERVAL} minute(s). (Overwrite using the USAGE_INTERVAL environment variable)`,
 );

From dcd385938a5db1572f253c24d8086eac731f9545 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 13:26:27 +0200
Subject: [PATCH 104/123] lint

---
 .../services/api/src/modules/operations/providers/traces.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 4d9b1bc3b8..7fe5a17c18 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -530,12 +530,6 @@ const SpanListModel = z.array(SpanModel);
 
 export type Span = z.TypeOf<typeof SpanModel>;
 
-type BucketResult = {
-  unit: 'minutes' | 'hours' | 'days' | 'weeks' | 'months';
-  count: number;
-  interval: number;
-};
-
 type BucketCandidate = {
   name: string;
   seconds: number;

From 091d771205f222912f85981313a082fc1a54b35e Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 13:38:49 +0200
Subject: [PATCH 105/123] fix not found state flashing

---
 packages/web/app/src/pages/target-trace.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 75e9784b3c..f88a2bc631 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -1039,6 +1039,7 @@ function TargetInsightsNewPageContent(props: {
     },
   });
 
+  const isFetching = result.fetching || result.stale;
   const trace = result.data?.target?.trace;
 
   return (
@@ -1116,7 +1117,7 @@ function TargetInsightsNewPageContent(props: {
           activeSpanTab={props.activeSpanTab}
         />
       )}
-      {!trace && !result.fetching && (
+      {!trace && !isFetching && (
         <>
           <Meta title="Trace Not found" />
           <NotFoundContent heading="Trace not found." subheading="This trace does not exist." />

From 9467d234b40d472b8850ec547992716428db8807 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 13:53:18 +0200
Subject: [PATCH 106/123] fix bucket end

---
 .../services/api/src/modules/operations/providers/traces.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/services/api/src/modules/operations/providers/traces.ts b/packages/services/api/src/modules/operations/providers/traces.ts
index 7fe5a17c18..5538e85630 100644
--- a/packages/services/api/src/modules/operations/providers/traces.ts
+++ b/packages/services/api/src/modules/operations/providers/traces.ts
@@ -263,7 +263,7 @@ export class Traces {
                 toDateTime(${formatDate(startDate)}, 'UTC')
                 , INTERVAL ${sql.raw(d.candidate.name)}
               )
-              , "number" * ${sql.raw(countStr)}
+              , ("number" + 1) * ${sql.raw(countStr)}
             ) AS "time_bucket"
           FROM
             "system"."numbers"

From 026e24660badaac4f6df5b55c89a441edee73c54 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 1 Oct 2025 17:47:47 +0200
Subject: [PATCH 107/123] use date range filter

---
 .../src/components/ui/date-range-picker.tsx   | 96 ++++++++++++-------
 .../src/components/ui/page-content-layout.tsx | 23 ++++-
 packages/web/app/src/lib/date-math.ts         |  2 +-
 packages/web/app/src/pages/target-traces.tsx  | 50 +++++-----
 packages/web/app/src/router.tsx               |  1 -
 5 files changed, 103 insertions(+), 69 deletions(-)

diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index f8c2d52975..ac28a08a6f 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { endOfDay, endOfToday, subMonths } from 'date-fns';
+import { endOfDay, endOfToday, formatDate, subMonths } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
 import { DateRange, Matcher } from 'react-day-picker';
 import { DurationUnit, formatDateToString, parse, units } from '@/lib/date-math';
@@ -32,13 +32,6 @@ export interface DateRangePickerProps {
   validUnits?: DurationUnit[];
 }
 
-const formatDate = (date: Date, locale = 'en-us'): string => {
-  return date.toLocaleDateString(locale, {
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
 interface ResolvedDateRange {
   from: Date;
   to: Date;
@@ -51,7 +44,16 @@ export type Preset = {
 };
 
 export function buildDateRangeString(range: ResolvedDateRange, locale = 'en-us'): string {
-  return `${formatDate(range.from, locale)} - ${formatDate(range.to, locale)}`;
+  const fromDate = formatDate(range.from, 'MMM d');
+  const fromTime = formatDate(range.from, 'HH:mm');
+  const toDate = formatDate(range.to, 'MMM d');
+  const toTime = formatDate(range.to, 'HH:mm');
+
+  if (fromDate === toDate) {
+    return `${fromDate}, ${fromTime} - ${toTime}`;
+  }
+
+  return `${fromDate}, ${fromTime} - ${toDate}, ${toTime}`;
 }
 
 function resolveRange(rawFrom: string, rawTo: string): ResolvedDateRange | null {
@@ -88,8 +90,12 @@ export const presetLast1Day: Preset = {
 
 // Define presets
 export const availablePresets: Preset[] = [
+  { name: 'last15m', label: 'Last 15 minutes', range: { from: 'now-15m', to: 'now' } },
   { name: 'last30m', label: 'Last 30 minutes', range: { from: 'now-30m', to: 'now' } },
   { name: 'last1h', label: 'Last 1 hour', range: { from: 'now-1h', to: 'now' } },
+  { name: 'last3h', label: 'Last 3 hours', range: { from: 'now-3h', to: 'now' } },
+  { name: 'last6h', label: 'Last 6 hours', range: { from: 'now-6h', to: 'now' } },
+  { name: 'last12h', label: 'Last 12 hours', range: { from: 'now-12h', to: 'now' } },
   presetLast1Day,
   presetLast7Days,
   { name: 'last14d', label: 'Last 14 days', range: { from: 'now-14d', to: 'now' } },
@@ -314,25 +320,34 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
         </Button>
       </PopoverTrigger>
       <PopoverContent align={props.align} className="mt-1 flex h-[380px] w-auto p-0">
-        <div className="flex flex-col py-4">
+        <div className="flex flex-col py-2">
           <div className="flex flex-col items-center justify-end gap-2 lg:flex-row lg:items-start">
             <div className="flex flex-col gap-1 pl-3">
-              <div className="mb-2 font-bold">Absolute date range</div>
+              <div className="mb-2 text-sm">Absolute date range</div>
               <div className="space-y-2">
                 <div className="grid w-full max-w-sm items-center gap-1.5">
-                  <Label htmlFor="from">From</Label>
+                  <Label htmlFor="from" className="text-xs text-gray-400">
+                    From
+                  </Label>
                   <div className="flex w-full max-w-sm items-center space-x-2">
-                    <Input
-                      type="text"
-                      id="from"
-                      value={fromValue}
-                      onChange={ev => {
-                        setFromValue(ev.target.value);
-                      }}
-                    />
-                    <Button size="icon" variant="outline" onClick={() => setShowCalendar(true)}>
-                      <CalendarDays className="size-4" />
-                    </Button>
+                    <div className="relative flex w-full">
+                      <Input
+                        type="text"
+                        id="from"
+                        value={fromValue}
+                        onChange={ev => {
+                          setFromValue(ev.target.value);
+                        }}
+                        className="font-mono"
+                      />
+                      <Button
+                        variant="ghost"
+                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        onClick={() => setShowCalendar(true)}
+                      >
+                        <CalendarDays className="size-3.5" />
+                      </Button>
+                    </div>
                   </div>
                   <div className="text-red-500">
                     {hasInvalidUnitRegex?.test(fromValue) ? (
@@ -343,19 +358,28 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                   </div>
                 </div>
                 <div className="grid w-full max-w-sm items-center gap-1.5">
-                  <Label htmlFor="to">To</Label>
+                  <Label htmlFor="to" className="text-xs text-gray-400">
+                    To
+                  </Label>
                   <div className="flex w-full max-w-sm items-center space-x-2">
-                    <Input
-                      type="text"
-                      id="to"
-                      value={toValue}
-                      onChange={ev => {
-                        setToValue(ev.target.value);
-                      }}
-                    />
-                    <Button size="icon" variant="outline" onClick={() => setShowCalendar(true)}>
-                      <CalendarDays className="size-4" />
-                    </Button>
+                    <div className="relative flex w-full">
+                      <Input
+                        type="text"
+                        id="to"
+                        value={toValue}
+                        onChange={ev => {
+                          setToValue(ev.target.value);
+                        }}
+                        className="font-mono"
+                      />
+                      <Button
+                        variant="ghost"
+                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        onClick={() => setShowCalendar(true)}
+                      >
+                        <CalendarDays className="size-3.5" />
+                      </Button>
+                    </div>
                   </div>
                   <div className="text-red-500">
                     {hasInvalidUnitRegex?.test(toValue) ? (
@@ -432,7 +456,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
           </div>
         </div>
         {showCalendar && (
-          <div className="absolute left-0 top-0 -translate-x-full">
+          <div className="absolute left-0 top-[4px] -translate-x-full">
             <div className="bg-popover mr-1 rounded-md border p-4">
               <Button
                 variant="ghost"
diff --git a/packages/web/app/src/components/ui/page-content-layout.tsx b/packages/web/app/src/components/ui/page-content-layout.tsx
index 784b2f35f5..7f749e7fe7 100644
--- a/packages/web/app/src/components/ui/page-content-layout.tsx
+++ b/packages/web/app/src/components/ui/page-content-layout.tsx
@@ -53,10 +53,11 @@ type SubPageLayoutHeaderProps = {
   children?: ReactNode;
   subPageTitle?: ReactNode;
   description?: string | ReactNode;
+  sideContent?: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 
-const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>((props, ref) => (
-  <div className="flex flex-row items-center justify-between" ref={ref}>
+const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>((props, ref) => {
+  const header = (
     <div className="space-y-1.5">
       <CardTitle>{props.subPageTitle}</CardTitle>
       {typeof props.description === 'string' ? (
@@ -65,9 +66,21 @@ const SubPageLayoutHeader = forwardRef<HTMLDivElement, SubPageLayoutHeaderProps>
         props.description
       )}
     </div>
-    <div>{props.children}</div>
-  </div>
-));
+  );
+  return (
+    <div className="flex flex-row items-center justify-between" ref={ref}>
+      {props.sideContent ? (
+        <div className="flex w-full">
+          {header}
+          {props.sideContent}
+        </div>
+      ) : (
+        header
+      )}
+      <div>{props.children}</div>
+    </div>
+  );
+});
 SubPageLayoutHeader.displayName = 'SubPageLayoutHeader';
 
 export { PageLayout, NavLayout, PageLayoutContent, SubPageLayout, SubPageLayoutHeader };
diff --git a/packages/web/app/src/lib/date-math.ts b/packages/web/app/src/lib/date-math.ts
index 0862ac659e..67d2aaf08d 100644
--- a/packages/web/app/src/lib/date-math.ts
+++ b/packages/web/app/src/lib/date-math.ts
@@ -32,7 +32,7 @@ function unitToDurationKey(unit: DurationUnit): keyof Duration {
   }
 }
 
-const dateStringFormat = 'yyyy-MM-dd';
+const dateStringFormat = 'yyyy-MM-dd HH:mm';
 
 function parseDateString(input: string) {
   try {
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 9f2ec4bb1e..48ddd690a1 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -23,6 +23,7 @@ import {
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
+import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
 import { Meta } from '@/components/ui/meta';
 import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { QueryError } from '@/components/ui/query-error';
@@ -52,6 +53,7 @@ import {
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FragmentType, graphql, useFragment } from '@/gql';
+import { useDateRangeController } from '@/lib/hooks/use-date-range-controller';
 import { cn } from '@/lib/utils';
 import { Link, useNavigate, useRouter } from '@tanstack/react-router';
 import {
@@ -63,18 +65,12 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import * as GraphQLSchema from '../gql/graphql';
-import * as dateMath from '../lib/date-math';
 import {
   CopyIconButton,
   formatNanoseconds,
   TraceSheet as ImportedTraceSheet,
 } from './target-trace';
-import {
-  DurationFilter,
-  MultiInputFilter,
-  MultiSelectFilter,
-  TimelineFilter,
-} from './traces/target-traces-filter';
+import { DurationFilter, MultiInputFilter, MultiSelectFilter } from './traces/target-traces-filter';
 
 const chartConfig = {
   ok: {
@@ -154,16 +150,13 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
     // Ensure left is always before right
     let left = refAreaLeft;
     let right = refAreaRight;
-    const now = new Date();
 
-    if (
-      parseDate(left, 'yyyy-MM-dd', now).getTime() > parseDate(right, 'yyyy-MM-dd', now).getTime()
-    ) {
+    if (new Date(left).getTime() > new Date(right).getTime()) {
       [left, right] = [right, left];
     }
 
     void navigate({
-      search: (prev: any) => ({ ...prev, filter: { ...prev.filter, period: [left, right] } }),
+      search: (prev: any) => ({ ...prev, from: left, to: right }),
     });
 
     setRefAreaLeft(null);
@@ -226,6 +219,7 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
         />
         <Bar stackId="all" dataKey="ok" fill="var(--color-ok)" name="Ok" />
         <Bar stackId="all" dataKey="error" fill="var(--color-error)" name="Error" />
+        // TODO: hide this if there is no filter declared
         <Bar stackId="all" dataKey="remaining" fill="rgba(170,175,180,0.1)" name="Filtered out" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
@@ -708,7 +702,6 @@ function LabelWithColor(props: { className: string; children: ReactNode }) {
 }
 
 export const TargetTracesFilterState = z.object({
-  period: z.union([z.tuple([z.string(), z.string()]), z.tuple([])]).default([]),
   duration: z.union([z.tuple([z.number(), z.number()]), z.tuple([])]).default([]),
   'trace.id': z.array(z.string()).default([]),
   'graphql.status': z.array(z.string()).default([]),
@@ -818,7 +811,6 @@ function Filters(
           </Button>
         ) : null}
       </SidebarGroupLabel>
-      <TimelineFilter value={filterSelector('period')} onChange={updateFilter('period')} />
       <DurationFilter value={filterSelector('duration')} onChange={updateFilter('duration')} />
       <MultiInputFilter
         key="trace.id"
@@ -1144,15 +1136,14 @@ const TargetTracesFetchMoreTracesQuery = graphql(`
 function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
   const targetRef = useTargetReference();
 
-  const period = useMemo(() => {
-    if (!props.filter.period?.length) {
-      return null;
-    }
-    return dateMath.resolveRange({ from: props.filter.period[0], to: props.filter.period[1] });
-  }, [props.filter.period]);
+  const dateRangeController = useDateRangeController({
+    // TODO: ressolve retention from account
+    dataRetentionInDays: 365,
+    defaultPreset: presetLast7Days,
+  });
 
   const filter: GraphQLSchema.TracesFilterInput = {
-    period,
+    period: dateRangeController.resolvedRange,
     duration: {
       min: props.filter.duration?.[0] ?? null,
       max: props.filter.duration?.[1] ?? null,
@@ -1302,10 +1293,17 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     <div className="py-6">
       <SubPageLayoutHeader
         subPageTitle="Traces"
-        description={
-          <>
-            <CardDescription>Insights into the requests made to your GraphQL API.</CardDescription>
-          </>
+        description="Insights into the requests made to your GraphQL API."
+        sideContent={
+          <div className="ml-auto mr-0">
+            <DateRangePicker
+              validUnits={['y', 'M', 'w', 'd', 'h', 'm']}
+              selectedRange={dateRangeController.selectedPreset.range}
+              startDate={dateRangeController.startDate}
+              align="end"
+              onUpdate={args => dateRangeController.setSelectedPreset(args.preset)}
+            />
+          </div>
         }
       />
       <SidebarProvider className="mt-4">
@@ -1315,7 +1313,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
           </SidebarContent>
         </Sidebar>
         <SidebarInset className="bg-transparent">
-          <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div className="flex flex-1 flex-col gap-4 pl-4 pt-0">
             <div>
               <TrafficBucketDiagram buckets={query.data?.target?.tracesStatusBreakdown ?? []} />
             </div>
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index c2288bdee7..5999348d36 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -685,7 +685,6 @@ const targetTracesRoute = createRoute({
         'http.url': [],
         'trace.id': [],
         duration: [],
-        period: [],
       } satisfies FilterState,
       sort = {
         id: 'timestamp',

From 87e2a2a3f6ac241dc1b759175a2e3b490c92a792 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 2 Oct 2025 12:15:11 +0200
Subject: [PATCH 108/123] quick range fix

---
 .../src/components/ui/date-range-picker.tsx   | 28 ++++-----
 .../lib/hooks/use-date-range-controller.ts    | 11 ++--
 packages/web/app/src/pages/target-traces.tsx  | 63 +++++++------------
 packages/web/app/src/router.tsx               | 15 ++---
 4 files changed, 49 insertions(+), 68 deletions(-)

diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index ac28a08a6f..6db36753ee 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { endOfDay, endOfToday, formatDate, subMonths } from 'date-fns';
 import { CalendarDays } from 'lucide-react';
 import { DateRange, Matcher } from 'react-day-picker';
@@ -122,10 +122,10 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     ? new RegExp(`[0-9]+(${disallowedUnits.join('|')})`)
     : null;
 
-  let presets = props.presets ?? availablePresets;
+  let staticPresets = props.presets ?? availablePresets;
 
   if (hasInvalidUnitRegex) {
-    presets = presets.filter(
+    staticPresets = staticPresets.filter(
       preset =>
         !hasInvalidUnitRegex.test(preset.range.from) && !hasInvalidUnitRegex.test(preset.range.to),
     );
@@ -153,7 +153,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
       !hasInvalidUnitRegex?.test(props.selectedRange.from) &&
       !hasInvalidUnitRegex?.test(props.selectedRange.to)
     ) {
-      preset = findMatchingPreset(props.selectedRange, presets);
+      preset = findMatchingPreset(props.selectedRange, staticPresets);
 
       if (preset) {
         return preset;
@@ -169,7 +169,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
       }
     }
 
-    return presets.at(0) ?? null;
+    return staticPresets.at(0) ?? null;
   }
 
   const [activePreset, setActivePreset] = useResetState<Preset | null>(getInitialPreset, [
@@ -241,9 +241,9 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     );
   };
 
-  const [dynamicPresets, setDynamicPresets] = useState<Preset[]>([]);
-  useEffect(() => {
+  const dynamicPresets = useMemo(() => {
     const number = parseInt(quickRangeFilter.replace(/\D/g, ''), 10);
+
     const dynamicPresets: Preset[] = [
       {
         name: `last${number}min`,
@@ -278,7 +278,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     ];
 
     const uniqueDynamicPresets = dynamicPresets.filter(
-      preset => !presets.some(p => p.name === preset.name),
+      preset => !staticPresets.some(p => p.name === preset.name),
     );
 
     const validDynamicPresets = uniqueDynamicPresets.filter(
@@ -288,17 +288,11 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     );
 
     if (number > 0 && validDynamicPresets.length > 0) {
-      setDynamicPresets(validDynamicPresets);
+      return validDynamicPresets;
     } else {
-      setDynamicPresets([]);
+      return [];
     }
   }, [quickRangeFilter, validUnits]);
-  presets = [...presets, ...dynamicPresets].sort((a, b) => {
-    const aWeight = calculateWeight(a);
-    const bWeight = calculateWeight(b);
-
-    return aWeight - bWeight;
-  });
 
   return (
     <Popover
@@ -448,7 +442,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                     preset.label.toLowerCase().includes(quickRangeFilter.toLowerCase().trim()),
                   )
                   .map(preset => <PresetButton key={preset.name} preset={preset} />)
-              : presets
+              : staticPresets
                   .filter(preset =>
                     preset.label.toLowerCase().includes(quickRangeFilter.toLowerCase().trim()),
                   )
diff --git a/packages/web/app/src/lib/hooks/use-date-range-controller.ts b/packages/web/app/src/lib/hooks/use-date-range-controller.ts
index d473d8a9f4..ed4bcd2625 100644
--- a/packages/web/app/src/lib/hooks/use-date-range-controller.ts
+++ b/packages/web/app/src/lib/hooks/use-date-range-controller.ts
@@ -16,8 +16,12 @@ import { useRouter } from '@tanstack/react-router';
 import { useResetState } from './use-reset-state';
 
 export function useDateRangeController(args: {
+  /** the data retention aka minimum time range. */
   dataRetentionInDays: number;
+  /** the default preset to pick if no range is provided. */
   defaultPreset: Preset;
+  /** controlled input range */
+  range?: Preset['range'];
 }) {
   const router = useRouter();
 
@@ -25,11 +29,10 @@ export function useDateRangeController(args: {
     () => subDays(new Date(), args.dataRetentionInDays),
     [args.dataRetentionInDays],
   );
-
   const searchParams = router.latestLocation.search;
-  // const params = new URLSearchParams(urlParameter);
-  const fromRaw = (('from' in searchParams && searchParams.from) ?? '') as string;
-  const toRaw = (('to' in searchParams && searchParams.to) ?? 'now') as string;
+  const fromRaw =
+    args.range?.from ?? ((('from' in searchParams && searchParams.from) ?? '') as string);
+  const toRaw = args.range?.to ?? ((('to' in searchParams && searchParams.to) ?? 'now') as string);
 
   const [selectedPreset] = useResetState(() => {
     const preset = availablePresets.find(p => p.range.from === fromRaw && p.range.to === toRaw);
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 48ddd690a1..475075187e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -16,14 +16,13 @@ import { z } from 'zod';
 import { Page, TargetLayout, useTargetReference } from '@/components/layouts/target';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { CardDescription } from '@/components/ui/card';
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
 } from '@/components/ui/chart';
-import { DateRangePicker, presetLast7Days } from '@/components/ui/date-range-picker';
+import { DateRangePicker, Preset, presetLast7Days } from '@/components/ui/date-range-picker';
 import { Meta } from '@/components/ui/meta';
 import { SubPageLayoutHeader } from '@/components/ui/page-content-layout';
 import { QueryError } from '@/components/ui/query-error';
@@ -282,16 +281,15 @@ const TracesList_Trace = graphql(`
 `);
 
 const TracesList = memo(function TracesList(
-  props: SortProps &
-    PaginationProps & {
-      traces: FragmentType<typeof TracesList_Trace>[];
-      onSelectTraceId: (traceId: string) => void;
-      selectedTraceId: string | null;
-      isFetching: boolean;
-      filter: GraphQLSchema.TracesFilterInput;
-      isFetchingMore: boolean;
-      fetchMore: null | (() => void);
-    },
+  props: SortProps & {
+    traces: FragmentType<typeof TracesList_Trace>[];
+    onSelectTraceId: (traceId: string) => void;
+    selectedTraceId: string | null;
+    isFetching: boolean;
+    filter: GraphQLSchema.TracesFilterInput;
+    isFetchingMore: boolean;
+    fetchMore: null | (() => void);
+  },
 ) {
   const router = useRouter();
   const data = useFragment(TracesList_Trace, props.traces);
@@ -318,26 +316,6 @@ const TracesList = memo(function TracesList(
     [router],
   );
 
-  const onPaginationChange = useCallback<OnChangeFn<PaginationState>>(
-    updater => {
-      const value = typeof updater === 'function' ? updater(props.pagination) : updater;
-
-      if (JSON.stringify(value) === JSON.stringify(props.pagination)) {
-        return;
-      }
-
-      void router.navigate({
-        search(params) {
-          return {
-            ...params,
-            pagination: value,
-          };
-        },
-      });
-    },
-    [router],
-  );
-
   const table = useReactTable({
     data,
     columns: [
@@ -601,11 +579,9 @@ const TracesList = memo(function TracesList(
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
-    onPaginationChange,
     manualPagination: true,
     state: {
       sorting: [props.sorting],
-      pagination: props.pagination,
     },
   });
 
@@ -1133,13 +1109,19 @@ const TargetTracesFetchMoreTracesQuery = graphql(`
   }
 `);
 
-function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProps) {
+function TargetTracesPageContent(
+  props: SortProps &
+    FilterProps & {
+      range: Preset['range'] | null;
+    },
+) {
   const targetRef = useTargetReference();
 
   const dateRangeController = useDateRangeController({
     // TODO: ressolve retention from account
     dataRetentionInDays: 365,
     defaultPreset: presetLast7Days,
+    range: props.range || undefined,
   });
 
   const filter: GraphQLSchema.TracesFilterInput = {
@@ -1162,6 +1144,8 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
     httpUrls: props.filter['http.url'],
   };
 
+  const paginationSize = 50;
+
   const urql = useClient();
   const [query] = useQuery({
     query: TargetTracesPageQuery,
@@ -1172,7 +1156,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
         targetSlug: targetRef.targetSlug,
       },
       filter,
-      first: props.pagination.pageSize,
+      first: paginationSize,
       sort: {
         sort:
           props.sorting.id === 'duration'
@@ -1319,7 +1303,6 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
             </div>
             <TracesList
               sorting={props.sorting}
-              pagination={props.pagination}
               traces={traces ?? []}
               onSelectTraceId={setSelectedTraceId}
               selectedTraceId={selectedTraceId}
@@ -1345,7 +1328,7 @@ function TargetTracesPageContent(props: SortProps & PaginationProps & FilterProp
                             targetSlug: targetRef.targetSlug,
                           },
                           filter,
-                          first: props.pagination.pageSize,
+                          first: paginationSize,
                           sort: {
                             sort:
                               props.sorting.id === 'duration'
@@ -1394,8 +1377,8 @@ export function TargetTracesPage(
     organizationSlug: string;
     projectSlug: string;
     targetSlug: string;
+    range: Preset['range'] | null;
   } & SortProps &
-    PaginationProps &
     FilterProps,
 ) {
   return (
@@ -1409,8 +1392,8 @@ export function TargetTracesPage(
       >
         <TargetTracesPageContent
           sorting={props.sorting}
-          pagination={props.pagination}
           filter={props.filter}
+          range={props.range}
         />
       </TargetLayout>
     </>
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 5999348d36..6cbd83b194 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -1,4 +1,4 @@
-import { lazy, useCallback, useEffect } from 'react';
+import { lazy, useCallback, useEffect, useMemo } from 'react';
 import { parse as jsUrlParse, stringify as jsUrlStringify } from 'jsurl2';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
 import { ToastContainer } from 'react-toastify';
@@ -661,7 +661,8 @@ const targetInsightsRoute = createRoute({
 const TargetTracesRouteSearch = z.object({
   filter: TargetTracesFilterState.optional(),
   sort: TargetTracesSort.shape.optional(),
-  pagination: TargetTracesPagination.shape.optional(),
+  from: z.string().optional(),
+  to: z.string().optional(),
 });
 
 const targetTracesRoute = createRoute({
@@ -690,20 +691,20 @@ const targetTracesRoute = createRoute({
         id: 'timestamp',
         desc: true,
       },
-      pagination = {
-        pageIndex: 0,
-        pageSize: 20,
-      } satisfies PaginationState,
+      from,
+      to,
     } = targetTracesRoute.useSearch();
 
+    const range = useMemo(() => (from && to ? { from, to } : null), [from, to]);
+
     return (
       <TargetTracesPage
         organizationSlug={organizationSlug}
         projectSlug={projectSlug}
         targetSlug={targetSlug}
         sorting={sort}
-        pagination={pagination}
         filter={filter}
+        range={range}
       />
     );
   },

From 675da0120b5df03512948a0db52ce894a53042c1 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 2 Oct 2025 12:43:05 +0200
Subject: [PATCH 109/123] empty state events

---
 packages/web/app/src/pages/target-trace.tsx | 66 +++++++++++----------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index f88a2bc631..25150dfefc 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -922,36 +922,42 @@ export function TraceSheet(props: TraceSheetProps) {
                   {activeView === 'events' ? (
                     <div className="p-4">
                       <div className="space-y-2">
-                        {events.map(event => (
-                          <Link
-                            to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
-                            params={{
-                              organizationSlug: props.organizationSlug,
-                              projectSlug: props.projectSlug,
-                              targetSlug: props.targetSlug,
-                              traceId: trace.id,
-                            }}
-                            search={{ activeSpanId: event.spanId, activeSpanTab: 'events' }}
-                            onMouseOver={() =>
-                              setHighlightedEvent({
-                                spanId: event.spanId,
-                                eventId: event.id,
-                              })
-                            }
-                            onMouseLeave={() => {
-                              setHighlightedEvent(null);
-                            }}
-                            className="mb-2 block"
-                            key={event.id}
-                          >
-                            <ExceptionTeaser
-                              type={String(event.attributes['exception.type'] ?? '')}
-                              message={String(event.attributes['exception.message'] ?? '')}
-                              stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
-                              name={event.name}
-                            />
-                          </Link>
-                        ))}
+                        {!events.length ? (
+                          <div className="text-sm text-gray-600">
+                            No events occured during this trace.
+                          </div>
+                        ) : (
+                          events.map(event => (
+                            <Link
+                              to="/$organizationSlug/$projectSlug/$targetSlug/trace/$traceId"
+                              params={{
+                                organizationSlug: props.organizationSlug,
+                                projectSlug: props.projectSlug,
+                                targetSlug: props.targetSlug,
+                                traceId: trace.id,
+                              }}
+                              search={{ activeSpanId: event.spanId, activeSpanTab: 'events' }}
+                              onMouseOver={() =>
+                                setHighlightedEvent({
+                                  spanId: event.spanId,
+                                  eventId: event.id,
+                                })
+                              }
+                              onMouseLeave={() => {
+                                setHighlightedEvent(null);
+                              }}
+                              className="mb-2 block"
+                              key={event.id}
+                            >
+                              <ExceptionTeaser
+                                type={String(event.attributes['exception.type'] ?? '')}
+                                message={String(event.attributes['exception.message'] ?? '')}
+                                stacktrace={String(event.attributes['exception.stacktrace'] ?? '')}
+                                name={event.name}
+                              />
+                            </Link>
+                          ))
+                        )}
                       </div>
                     </div>
                   ) : null}

From a3630de47d9ce831e6803b692135efbdf5156c4c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 2 Oct 2025 13:02:25 +0200
Subject: [PATCH 110/123] cleanup and linting

---
 .../app/src/components/ui/date-range-picker.tsx |  2 +-
 .../web/app/src/pages/target-app-version.tsx    |  2 +-
 packages/web/app/src/pages/target-traces.tsx    | 17 ++---------------
 packages/web/app/src/router.tsx                 |  2 --
 4 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index 6db36753ee..e59f008b11 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -43,7 +43,7 @@ export type Preset = {
   range: { from: string; to: string };
 };
 
-export function buildDateRangeString(range: ResolvedDateRange, locale = 'en-us'): string {
+export function buildDateRangeString(range: ResolvedDateRange): string {
   const fromDate = formatDate(range.from, 'MMM d');
   const fromTime = formatDate(range.from, 'HH:mm');
   const toDate = formatDate(range.to, 'MMM d');
diff --git a/packages/web/app/src/pages/target-app-version.tsx b/packages/web/app/src/pages/target-app-version.tsx
index a327807819..e735c41659 100644
--- a/packages/web/app/src/pages/target-app-version.tsx
+++ b/packages/web/app/src/pages/target-app-version.tsx
@@ -30,7 +30,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { graphql } from '@/gql';
 import { useRedirect } from '@/lib/access/common';
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { Link } from '@tanstack/react-router';
+import { Link, useRouter } from '@tanstack/react-router';
 
 const TargetAppsVersionQuery = graphql(`
   query TargetAppsVersionQuery(
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 475075187e..7d89577b0a 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -1,5 +1,5 @@
 import { Fragment, memo, ReactNode, useCallback, useMemo, useRef, useState } from 'react';
-import { formatDate, formatISO, parse as parseDate } from 'date-fns';
+import { formatDate, formatISO } from 'date-fns';
 import { formatInTimeZone, toZonedTime } from 'date-fns-tz';
 import {
   ArrowDown,
@@ -218,7 +218,7 @@ const TrafficBucketDiagram = memo(function Traffic(props: TrafficProps) {
         />
         <Bar stackId="all" dataKey="ok" fill="var(--color-ok)" name="Ok" />
         <Bar stackId="all" dataKey="error" fill="var(--color-error)" name="Error" />
-        // TODO: hide this if there is no filter declared
+        {/*TODO: hide this if there is no filter declared */}
         <Bar stackId="all" dataKey="remaining" fill="rgba(170,175,180,0.1)" name="Filtered out" />
         {refAreaLeft && refAreaRight && (
           <ReferenceArea x1={refAreaLeft} x2={refAreaRight} fill="white" fillOpacity={0.2} />
@@ -247,19 +247,6 @@ type SortProps = {
   sorting: SortState;
 };
 
-const TargetTracesPaginationShape = z.object({
-  pageIndex: z.number().min(0).default(0),
-  pageSize: z.number().min(10).max(100).default(20),
-});
-export const TargetTracesPagination = {
-  shape: TargetTracesPaginationShape,
-};
-
-export type PaginationState = z.infer<typeof TargetTracesPaginationShape>;
-type PaginationProps = {
-  pagination: PaginationState;
-};
-
 const TracesList_Trace = graphql(`
   fragment TracesList_Trace on Trace {
     id
diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 6cbd83b194..09c431c7c2 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -80,10 +80,8 @@ import { TargetSettingsPage, TargetSettingsPageEnum } from './pages/target-setti
 import { TargetTracePage } from './pages/target-trace';
 import {
   FilterState,
-  PaginationState,
   TargetTracesFilterState,
   TargetTracesPage,
-  TargetTracesPagination,
   TargetTracesSort,
 } from './pages/target-traces';
 

From 8d42f29757ce9e744868ed2c488b3cb53d9b4564 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Thu, 2 Oct 2025 15:37:59 +0200
Subject: [PATCH 111/123] cleanup

---
 .../src/components/ui/date-range-picker.tsx   | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index e59f008b11..dd5c2def89 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -66,16 +66,6 @@ function resolveRange(rawFrom: string, rawTo: string): ResolvedDateRange | null
   return null;
 }
 
-function calculateWeight(preset: Preset): number {
-  const from = parse(preset.range.from);
-  const to = parse(preset.range.to);
-  if (from && to) {
-    const durationInMinutes = Math.round((to.getTime() - from.getTime()) / (1000 * 60));
-    return durationInMinutes;
-  }
-  return 0;
-}
-
 export const presetLast7Days: Preset = {
   name: 'last7d',
   label: 'Last 7 days',
@@ -175,6 +165,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
   const [activePreset, setActivePreset] = useResetState<Preset | null>(getInitialPreset, [
     props.selectedRange,
   ]);
+
   const [fromValue, setFromValue] = useState(activePreset?.range.from ?? '');
   const [toValue, setToValue] = useState(activePreset?.range.to ?? '');
   const [range, setRange] = useState<DateRange | undefined>(undefined);
@@ -289,9 +280,9 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
 
     if (number > 0 && validDynamicPresets.length > 0) {
       return validDynamicPresets;
-    } else {
-      return [];
     }
+
+    return [];
   }, [quickRangeFilter, validUnits]);
 
   return (
@@ -336,7 +327,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                       />
                       <Button
                         variant="ghost"
-                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        className="absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
                         onClick={() => setShowCalendar(true)}
                       >
                         <CalendarDays className="size-3.5" />
@@ -368,7 +359,7 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
                       />
                       <Button
                         variant="ghost"
-                        className="color-white absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
+                        className="absolute right-2 top-1/2 size-6 -translate-y-1/2 px-0"
                         onClick={() => setShowCalendar(true)}
                       >
                         <CalendarDays className="size-3.5" />

From 091a53591b3c40a75f3ccd7bfefffb56137bfe81 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 7 Oct 2025 15:26:38 +0200
Subject: [PATCH 112/123] show quick filter selections as label

---
 .../src/components/ui/date-range-picker.tsx   | 208 +++++++++++-------
 1 file changed, 132 insertions(+), 76 deletions(-)

diff --git a/packages/web/app/src/components/ui/date-range-picker.tsx b/packages/web/app/src/components/ui/date-range-picker.tsx
index dd5c2def89..90a6dbfab6 100644
--- a/packages/web/app/src/components/ui/date-range-picker.tsx
+++ b/packages/web/app/src/components/ui/date-range-picker.tsx
@@ -95,6 +95,56 @@ export const availablePresets: Preset[] = [
   { name: 'last1y', label: 'Last 1 year', range: { from: 'now-364d', to: 'now' } },
 ];
 
+function createQuickRangePresets(number: number, validUnits: DurationUnit[]): Preset[] {
+  const presets: Preset[] = [];
+
+  if (validUnits.includes('m')) {
+    presets.push({
+      name: `last${number}min`,
+      label: `Last ${number} minutes`,
+      range: { from: `now-${number}m`, to: 'now' },
+    });
+  }
+  if (validUnits.includes('h')) {
+    presets.push({
+      name: `last${number}h`,
+      label: `Last ${number} hours`,
+      range: { from: `now-${number}h`, to: 'now' },
+    });
+  }
+  if (validUnits.includes('d')) {
+    presets.push({
+      name: `last${number}d`,
+      label: `Last ${number} days`,
+      range: { from: `now-${number}d`, to: 'now' },
+    });
+  }
+  if (validUnits.includes('w')) {
+    presets.push({
+      name: `last${number}w`,
+      label: `Last ${number} weeks`,
+      range: { from: `now-${number}w`, to: 'now' },
+    });
+  }
+  if (validUnits.includes('M')) {
+    presets.push({
+      name: `last${number}M`,
+      label: `Last ${number} months`,
+      range: { from: `now-${number}M`, to: 'now' },
+    });
+  }
+
+  if (validUnits.includes('y')) {
+    presets.push({
+      name: `last${number}y`,
+      label: `Last ${number} years`,
+      range: { from: `now-${number}y`, to: 'now' },
+    });
+  }
+
+  return presets;
+}
+
 export function findMatchingPreset(
   range: Preset['range'],
   availablePresets: Preset[],
@@ -137,29 +187,53 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
   const [showCalendar, setShowCalendar] = useState(false);
 
   function getInitialPreset() {
-    let preset: Preset | undefined;
+    const fallbackPreset = staticPresets.at(0) ?? null;
+
     if (
-      props.selectedRange &&
-      !hasInvalidUnitRegex?.test(props.selectedRange.from) &&
-      !hasInvalidUnitRegex?.test(props.selectedRange.to)
+      !props.selectedRange ||
+      hasInvalidUnitRegex?.test(props.selectedRange.from) ||
+      hasInvalidUnitRegex?.test(props.selectedRange.to)
     ) {
-      preset = findMatchingPreset(props.selectedRange, staticPresets);
+      return fallbackPreset;
+    }
 
-      if (preset) {
-        return preset;
-      }
+    // Attempt to find preset from out pre-defined presets first
+    const preset = findMatchingPreset(props.selectedRange, staticPresets);
+
+    if (preset) {
+      return preset;
+    }
 
-      const resolvedRange = resolveRange(props.selectedRange.from, props.selectedRange.to);
-      if (resolvedRange) {
-        return {
-          name: `${props.selectedRange.from}_${props.selectedRange.to}`,
-          label: buildDateRangeString(resolvedRange),
-          range: props.selectedRange,
-        };
+    // attempt to find the preset based on dynamic presets (so we show something like "last x days" instead of 10. September - 12.September for `now-2d`)
+    if (props.selectedRange.from.startsWith('now-')) {
+      const number = parseInt(props.selectedRange.from.replace(/\D/g, ''), 10);
+      if (!Number.isNaN(number)) {
+        const quickRangPresets = createQuickRangePresets(number, validUnits);
+
+        const preset = quickRangPresets.find(
+          preset =>
+            preset.range.from === props.selectedRange?.from &&
+            preset.range.to === props.selectedRange.to,
+        );
+
+        if (preset) {
+          return preset;
+        }
       }
     }
 
-    return staticPresets.at(0) ?? null;
+    // if everything else fails we show an absolute range!
+
+    const resolvedRange = resolveRange(props.selectedRange.from, props.selectedRange.to);
+    if (resolvedRange) {
+      return {
+        name: `${props.selectedRange.from}_${props.selectedRange.to}`,
+        label: buildDateRangeString(resolvedRange),
+        range: props.selectedRange,
+      };
+    }
+
+    return fallbackPreset;
   }
 
   const [activePreset, setActivePreset] = useResetState<Preset | null>(getInitialPreset, [
@@ -202,71 +276,53 @@ export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
     setActivePreset(getInitialPreset());
   };
 
-  const PresetButton = ({ preset }: { preset: Preset }): JSX.Element => {
-    let isDisabled = false;
-
-    if (props.startDate) {
-      const from = parse(preset.range.from);
-      if (from && from.getTime() < props.startDate.getTime()) {
-        isDisabled = true;
-      }
-    }
+  const PresetButton = useMemo(
+    () =>
+      function PresetButton({ preset }: { preset: Preset }): React.ReactNode {
+        let isDisabled = false;
+
+        if (props.startDate) {
+          const from = parse(preset.range.from);
+          const time = from?.getTime();
+          const startTime = props.startDate?.getTime();
+
+          if (
+            !time ||
+            !startTime ||
+            Number.isNaN(time) ||
+            Number.isNaN(startTime) ||
+            time < props.startDate.getTime()
+          ) {
+            isDisabled = true;
+          }
+        }
 
-    return (
-      <Button
-        variant="ghost"
-        onClick={() => {
-          setActivePreset(preset);
-          setFromValue(preset.range.from);
-          setToValue(preset.range.to);
-          setRange(undefined);
-          setShowCalendar(false);
-          setIsOpen(false);
-          setQuickRangeFilter('');
-        }}
-        disabled={isDisabled}
-        className="w-full justify-start text-left"
-      >
-        {preset.label}
-      </Button>
-    );
-  };
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => {
+              setActivePreset(preset);
+              setFromValue(preset.range.from);
+              setToValue(preset.range.to);
+              setRange(undefined);
+              setShowCalendar(false);
+              setIsOpen(false);
+              setQuickRangeFilter('');
+            }}
+            disabled={isDisabled}
+            className="w-full justify-start text-left"
+          >
+            {preset.label}
+          </Button>
+        );
+      },
+    [props.startDate],
+  );
 
   const dynamicPresets = useMemo(() => {
     const number = parseInt(quickRangeFilter.replace(/\D/g, ''), 10);
 
-    const dynamicPresets: Preset[] = [
-      {
-        name: `last${number}min`,
-        label: `Last ${number} minutes`,
-        range: { from: `now-${number}m`, to: 'now' },
-      },
-      {
-        name: `last${number}h`,
-        label: `Last ${number} hours`,
-        range: { from: `now-${number}h`, to: 'now' },
-      },
-      {
-        name: `last${number}d`,
-        label: `Last ${number} days`,
-        range: { from: `now-${number}d`, to: 'now' },
-      },
-      {
-        name: `last${number}w`,
-        label: `Last ${number} weeks`,
-        range: { from: `now-${number}w`, to: 'now' },
-      },
-      {
-        name: `last${number}M`,
-        label: `Last ${number} months`,
-        range: { from: `now-${number}M`, to: 'now' },
-      },
-      {
-        name: `last${number}y`,
-        label: `Last ${number} years`,
-        range: { from: `now-${number}y`, to: 'now' },
-      },
-    ];
+    const dynamicPresets = createQuickRangePresets(number, validUnits);
 
     const uniqueDynamicPresets = dynamicPresets.filter(
       preset => !staticPresets.some(p => p.name === preset.name),

From 868dd89ec7afda6fec560c2aa9320e7658ab1f54 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:10:00 +0200
Subject: [PATCH 113/123] use config

---
 deployment/services/environment.ts    | 4 ++--
 deployment/services/otel-collector.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/deployment/services/environment.ts b/deployment/services/environment.ts
index 24c0134813..e761f87987 100644
--- a/deployment/services/environment.ts
+++ b/deployment/services/environment.ts
@@ -81,8 +81,8 @@ export function prepareEnvironment(input: {
       },
       tracingCollector: {
         cpuLimit: isProduction ? '1000m' : '100m',
-        memoryLimit: isProduction ? '1000Mi' : '200Mi',
-        maxReplicas: isProduction || isStaging ? 2 : 1,
+        memoryLimit: isProduction ? '2000Mi' : '200Mi',
+        maxReplicas: isProduction || isStaging ? 3 : 1,
       },
     },
   };
diff --git a/deployment/services/otel-collector.ts b/deployment/services/otel-collector.ts
index 68f6251f83..581907c281 100644
--- a/deployment/services/otel-collector.ts
+++ b/deployment/services/otel-collector.ts
@@ -36,7 +36,7 @@ export function deployOTELCollector(args: {
       livenessProbe: '/',
       startupProbe: '/',
       exposesMetrics: true,
-      replicas: args.environment.isProduction ? 3 : 1,
+      replicas: args.environment.podsConfig.tracingCollector.maxReplicas,
       pdb: true,
       availabilityOnEveryNode: true,
       port: 4318,

From ffb00b15630251c719fd329b06a3425af5cff9ec Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:20:21 +0200
Subject: [PATCH 114/123] back off

---
 docker/configs/otel-collector/extension-hiveauth/extension.go | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker/configs/otel-collector/extension-hiveauth/extension.go b/docker/configs/otel-collector/extension-hiveauth/extension.go
index d89ecb5cf9..353a906cdd 100644
--- a/docker/configs/otel-collector/extension-hiveauth/extension.go
+++ b/docker/configs/otel-collector/extension-hiveauth/extension.go
@@ -162,7 +162,7 @@ func (h *hiveAuthExtension) doAuthRequest(ctx context.Context, auth string, targ
 			resp.Body.Close()
 
 			select {
-			case <-time.After(retryDelay):
+			case <-time.After(retryDelay * time.Duration(attempt + 1)):
 				// Continue to next attempt.
 			case <-ctx.Done():
 				return "", ctx.Err()

From da231325d5ecbd2e9037ae35f30d362ed42e480f Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:20:34 +0200
Subject: [PATCH 115/123] no low cardinality

---
 packages/migrations/src/clickhouse-actions/015-otel-trace.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
index bd3adb3cad..784763f8f9 100644
--- a/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
+++ b/packages/migrations/src/clickhouse-actions/015-otel-trace.ts
@@ -9,7 +9,7 @@ export const action: Action = async exec => {
       , "SpanId" String CODEC(ZSTD(1))
       , "ParentSpanId" String CODEC(ZSTD(1))
       , "TraceState" String CODEC(ZSTD(1))
-      , "SpanName" LowCardinality(String) CODEC(ZSTD(1))
+      , "SpanName" String CODEC(ZSTD(1))
       , "SpanKind" LowCardinality(String) CODEC(ZSTD(1))
       , "ServiceName" LowCardinality(String) CODEC(ZSTD(1))
       , "ResourceAttributes" Map(LowCardinality(String), String) CODEC(ZSTD(1))

From 5b54ed1369c707535fbf0aa00f58a5f344d9b6f4 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:21:29 +0200
Subject: [PATCH 116/123] stable af

---
 .../services/api/src/modules/operations/resolvers/Target.ts    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/services/api/src/modules/operations/resolvers/Target.ts b/packages/services/api/src/modules/operations/resolvers/Target.ts
index 5f86e64425..03fcf8e938 100644
--- a/packages/services/api/src/modules/operations/resolvers/Target.ts
+++ b/packages/services/api/src/modules/operations/resolvers/Target.ts
@@ -1,4 +1,5 @@
 import Dataloader from 'dataloader';
+import stableJSONStringify from 'fast-json-stable-stringify';
 import { parseDateRangeInput } from '../../../shared/helpers';
 import { ClickHouse, sql } from '../providers/clickhouse-client';
 import { OperationsManager } from '../providers/operations-manager';
@@ -231,7 +232,7 @@ export const Target: Pick<
         return inputs.map(input => rowsGroupedByKey[input.key] ?? []);
       },
       {
-        cacheKeyFn: JSON.stringify,
+        cacheKeyFn: stableJSONStringify,
       },
     );
 

From f17697e37e33ab51db0dbac9945085e9d17486cb Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:25:56 +0200
Subject: [PATCH 117/123] DateTime64

---
 .../services/api/src/modules/shared/module.graphql.ts     | 8 +++++++-
 .../api/src/modules/shared/resolvers/DateTime64.ts        | 1 -
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/services/api/src/modules/shared/module.graphql.ts b/packages/services/api/src/modules/shared/module.graphql.ts
index 401d4ea484..c5cf0a1c06 100644
--- a/packages/services/api/src/modules/shared/module.graphql.ts
+++ b/packages/services/api/src/modules/shared/module.graphql.ts
@@ -16,7 +16,13 @@ export default gql`
     @specifiedBy(url: "https://the-guild.dev/graphql/scalars/docs/scalars/date-time")
 
   """
-  DateTime with nano second precission.
+  A date-time string at UTC with nano-second precision, such as '2007-12-03T10:15:30.123456Z', is compliant with the extended date-time format outlined in section 5.6 of the RFC 3339 profile of the ISO 8601 standard for representation of dates and times using the Gregorian calendar. The fractional part of the seconds can range up to nanosecond precision.
+
+  This scalar represents an exact instant on the timeline, such as the precise moment a user account was created, including fractional seconds.
+
+  This scalar ignores leap seconds (thereby assuming that a minute constitutes 59 seconds). In this respect, it diverges from the RFC 3339 profile.
+
+  Where an RFC 3339 compliant date-time string has a time-zone other than UTC, it is shifted to UTC. For example, the date-time string '2016-01-01T14:10:20.500+01:00' is shifted to '2016-01-01T13:10:20.500Z'.
   """
   scalar DateTime64
 
diff --git a/packages/services/api/src/modules/shared/resolvers/DateTime64.ts b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
index 05e27a2c97..402a39f920 100644
--- a/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
+++ b/packages/services/api/src/modules/shared/resolvers/DateTime64.ts
@@ -81,7 +81,6 @@ const parseDateTime = (dateTime: string) => dateTime;
 
 export const DateTime64 = new GraphQLScalarType({
   name: 'DateTime64',
-  description: 'TODO',
   serialize(value) {
     if (value instanceof Date) {
       if (validateJSDate(value)) {

From e7644bd3ab83d19aaa31c24550f120e7456b6415 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:26:50 +0200
Subject: [PATCH 118/123] typo

---
 packages/services/server/src/otel-auth-endpoint.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/services/server/src/otel-auth-endpoint.ts b/packages/services/server/src/otel-auth-endpoint.ts
index 1b02e9a515..7daa881979 100644
--- a/packages/services/server/src/otel-auth-endpoint.ts
+++ b/packages/services/server/src/otel-auth-endpoint.ts
@@ -73,7 +73,7 @@ export function createOtelAuthEndpoint(args: {
 
 // TODO: https://github.com/open-telemetry/opentelemetry-collector/blob/ae0b83b94cc4d4cd90a73a2f390d23c25f848aec/config/confighttp/confighttp.go#L551C4-L551C84
 //       swallows the error and returns 401 Unauthorized to the OTel SDK.
-const invalidTaretRefError =
+const invalidTargetRefError =
   'Invalid slug or ID provided for target reference. ' +
   'Must match target slug "$organization_slug/$project_slug/$target_slug" (e.g. "the-guild/graphql-hive/staging") ' +
   'or UUID (e.g. c8164307-0b42-473e-a8c5-2860bb4beff6).';
@@ -85,7 +85,7 @@ function parseTargetRef(targetRef: string) {
     if (parts.length !== 3) {
       return {
         ok: false,
-        error: invalidTaretRefError,
+        error: invalidTargetRefError,
       } as const;
     }
 
@@ -105,7 +105,7 @@ function parseTargetRef(targetRef: string) {
   if (!isUUID(targetRef)) {
     return {
       ok: false,
-      error: invalidTaretRefError,
+      error: invalidTargetRefError,
     } as const;
   }
 

From 5b6c6eb7a7631ea03ea17bc942030cc3fa7114a5 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:28:17 +0200
Subject: [PATCH 119/123] we dont need that

---
 packages/web/app/src/router.tsx | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/web/app/src/router.tsx b/packages/web/app/src/router.tsx
index 09c431c7c2..9bf6295782 100644
--- a/packages/web/app/src/router.tsx
+++ b/packages/web/app/src/router.tsx
@@ -985,20 +985,6 @@ export const router = createRouter({
   routeTree,
   parseSearch: parseSearchWith(jsUrlParse),
   stringifySearch: stringifySearchWith(jsUrlStringify),
-  // parseSearch: parseSearchWith(value =>
-  //   qs.parse(value, {
-  //     parseNumbers: true,
-  //     parseBooleans: true,
-  //     arrayFormat: 'bracket-separator',
-  //     arrayFormatSeparator: '|',
-  //   }),
-  // ),
-  // stringifySearch: stringifySearchWith(value =>
-  //   qs.stringify(value, {
-  //     arrayFormat: 'bracket-separator',
-  //     arrayFormatSeparator: '|',
-  //   }),
-  // ),
 });
 
 router.history.subscribe(() => {

From f082674d2ba6e4bf043138bc212176479fbb80da Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:30:56 +0200
Subject: [PATCH 120/123] remove docs

---
 tracing/notes.md   | 16 ----------------
 tracing/signoz.md  | 39 ---------------------------------------
 tracing/uptrace.md | 17 -----------------
 3 files changed, 72 deletions(-)
 delete mode 100644 tracing/notes.md
 delete mode 100644 tracing/signoz.md
 delete mode 100644 tracing/uptrace.md

diff --git a/tracing/notes.md b/tracing/notes.md
deleted file mode 100644
index f41815e81a..0000000000
--- a/tracing/notes.md
+++ /dev/null
@@ -1,16 +0,0 @@
-We want to:
-
-- show incoming graphql requests
-- show subgraph calls
-- track parse / validation / planning steps as well
-- annotate graphql requests with a list of subgraph names (so we can show operations that a subgraph
-  is involved with)
-- show performance of subgraph calls (latency, error rate - globally)
-- capture errors in subgraph calls
-- identify traces by client name and version
-- attach http status
-- attach http method
-- attach http url
-- attach custom attributes (like user id, header values, etc)
-- attach query plan cache hit/miss
-- attach queries
diff --git a/tracing/signoz.md b/tracing/signoz.md
deleted file mode 100644
index b52f3d953c..0000000000
--- a/tracing/signoz.md
+++ /dev/null
@@ -1,39 +0,0 @@
-```
-┌─name───────────────────────────────────────────┐
- 1.  │ signoz_traces.dependency_graph_minutes_db_calls_mv_v2        │
- 2.  │ signoz_traces.dependency_graph_minutes_messaging_calls_mv_v2 │
- 3.  │ signoz_traces.dependency_graph_minutes_service_calls_mv_v2   │
- 4.  │ signoz_traces.dependency_graph_minutes_v2                    │
- 5.  │ signoz_traces.distributed_dependency_graph_minutes_v2        │
- 6.  │ signoz_traces.distributed_schema_migrations_v2               │
- 7.  │ signoz_traces.distributed_signoz_error_index_v2              │
- 8.  │ signoz_traces.distributed_signoz_index_v2                    │
- 9.  │ signoz_traces.distributed_signoz_index_v3                    │
- 10. │ signoz_traces.distributed_signoz_spans                       │
- 11. │ signoz_traces.distributed_span_attributes                    │
- 12. │ signoz_traces.distributed_span_attributes_keys               │
- 13. │ signoz_traces.distributed_tag_attributes_v2                  │
- 14. │ signoz_traces.distributed_top_level_operations               │
- 15. │ signoz_traces.distributed_trace_summary                      │
- 16. │ signoz_traces.distributed_traces_v3_resource                 │
- 17. │ signoz_traces.distributed_usage                              │
- 18. │ signoz_traces.distributed_usage_explorer                     │
- 19. │ signoz_traces.durationSort                                   │
- 20. │ signoz_traces.root_operations                                │
- 21. │ signoz_traces.schema_migrations_v2                           │
- 22. │ signoz_traces.signoz_error_index_v2                          │
- 23. │ signoz_traces.signoz_index_v2                                │
- 24. │ signoz_traces.signoz_index_v3                                │
- 25. │ signoz_traces.signoz_spans                                   │
- 26. │ signoz_traces.span_attributes                                │
- 27. │ signoz_traces.span_attributes_keys                           │
- 28. │ signoz_traces.sub_root_operations                            │
- 29. │ signoz_traces.tag_attributes_v2                              │
- 30. │ signoz_traces.top_level_operations                           │
- 31. │ signoz_traces.trace_summary                                  │
- 32. │ signoz_traces.trace_summary_mv                               │
- 33. │ signoz_traces.traces_v3_resource                             │
- 34. │ signoz_traces.usage                                          │
- 35. │ signoz_traces.usage_explorer                                 │
- 36. │ signoz_traces.usage_explorer_mv                              │
-```
diff --git a/tracing/uptrace.md b/tracing/uptrace.md
deleted file mode 100644
index b040d278b3..0000000000
--- a/tracing/uptrace.md
+++ /dev/null
@@ -1,17 +0,0 @@
-```
-uptrace.ch_migration_locks
-uptrace.ch_migrations
-uptrace.datapoint_hours
-uptrace.datapoint_hours_mv
-uptrace.datapoint_minutes
-uptrace.datapoint_minutes_buffer
-uptrace.metrics_uptrace_service_graph_client_duration_mv
-uptrace.metrics_uptrace_service_graph_failed_requests_mv
-uptrace.metrics_uptrace_service_graph_server_duration_mv
-uptrace.service_graph_edges
-uptrace.service_graph_edges_buffer
-uptrace.spans_data
-uptrace.spans_data_buffer
-uptrace.spans_index
-uptrace.spans_index_buffer
-```

From e3fe3385907ed4eff9b014db66ea85a2b3603daf Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 14:33:25 +0200
Subject: [PATCH 121/123] dont leak my localhost

---
 scripts/seed-traces/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/seed-traces/README.md b/scripts/seed-traces/README.md
index fdf8f624bb..473f4cca59 100644
--- a/scripts/seed-traces/README.md
+++ b/scripts/seed-traces/README.md
@@ -15,7 +15,7 @@ realistic trace data.
 Then run the following script:
 
 ```
-HIVE_ORGANIZATION_ACCESS_TOKEN=hvo1/NWZmMGJjZmItODQxZS00ZmRiLWE4OTUtMzE3NDc2OWNhMGUwOjY2ZmM1NDI3ODRmYjFiMGYwODUyMWYwYmUyYjc1Yzk5NWM1ZTk0YWVlMzA4MTkxZGQ0NTFmZjcwNTRmM2IyMWY= \
+HIVE_ORGANIZATION_ACCESS_TOKEN=hvo1/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx= \
 HIVE_TARGET_REF=the-guild/otel-demo/development \
 node --experimental-strip-types seed-traces.mts
 ```

From 2fb6f23fe9921478e1162f901cdff3e76b629ace Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 15:08:40 +0200
Subject: [PATCH 122/123] meh

---
 packages/web/app/src/pages/target-trace.tsx  | 9 +++++++--
 packages/web/app/src/pages/target-traces.tsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/web/app/src/pages/target-trace.tsx b/packages/web/app/src/pages/target-trace.tsx
index 25150dfefc..330546fdd6 100644
--- a/packages/web/app/src/pages/target-trace.tsx
+++ b/packages/web/app/src/pages/target-trace.tsx
@@ -689,6 +689,7 @@ function SpanNode(props: SpanNodeProps) {
         ? null
         : props.span.children.length
           ? props.span.children.map((childSpan, i, arr) => {
+              // eslint-disable-next-line react-hooks/rules-of-hooks
               const uchildSpan = useFragment(SpanFragment, childSpan.span);
 
               const serviceName: string | null =
@@ -1198,6 +1199,7 @@ type SpanEvent = {
 };
 
 type SpanFragmentWithChildren = {
+  id: string;
   span: FragmentType<typeof SpanFragment>;
   children: Array<SpanFragmentWithChildren>;
   events: Array<SpanEvent>;
@@ -1213,9 +1215,11 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
 
   let rootSpan: SpanFragmentWithChildren | null = null;
   for (const fragment of fragments) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const ufragment = useFragment(SpanFragment, fragment);
 
     const fragmentWithChildren: SpanFragmentWithChildren = {
+      id: ufragment.id,
       span: fragment,
       children: [],
       durationNs: differenceInNanoseconds(ufragment.endTime, ufragment.startTime),
@@ -1236,19 +1240,20 @@ function createSpanTreeStructure(fragments: Array<FragmentType<typeof SpanFragme
     throw new Error('No root found.');
   }
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const uroot = useFragment(SpanFragment, rootSpan.span);
   const startNS = parseRFC3339ToEpochNanos(uroot.startTime);
 
-  // TODO: this should probably be provided be the backend
   let eventIdCounter = 0;
 
   for (const item of spansById.values()) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const uitem = useFragment(SpanFragment, item.span);
 
     for (const event of uitem.events) {
       eventIdCounter++;
       const spanEvent: SpanEvent = {
-        id: String(eventIdCounter),
+        id: uitem.id + '_' + String(eventIdCounter),
         spanId: uitem.id,
         name: event.name,
         attributes: event.attributes,
diff --git a/packages/web/app/src/pages/target-traces.tsx b/packages/web/app/src/pages/target-traces.tsx
index 7d89577b0a..359475471e 100644
--- a/packages/web/app/src/pages/target-traces.tsx
+++ b/packages/web/app/src/pages/target-traces.tsx
@@ -303,6 +303,7 @@ const TracesList = memo(function TracesList(
     [router],
   );
 
+  const targetRef = useTargetReference();
   const table = useReactTable({
     data,
     columns: [
@@ -310,7 +311,6 @@ const TracesList = memo(function TracesList(
         accessorKey: 'id',
         header: () => <div className="pl-2 text-left">Trace ID</div>,
         cell: ({ row }) => {
-          const targetRef = useTargetReference();
           const traceId = row.getValue('id') as string;
 
           return (

From 88f1b49d9bdfd74d4abbf67fb1d907e91f32c19a Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Wed, 8 Oct 2025 15:51:34 +0200
Subject: [PATCH 123/123] Update
 packages/services/api/src/modules/operations/module.graphql.ts

Co-authored-by: jdolle <1841898+jdolle@users.noreply.github.com>
---
 packages/services/api/src/modules/operations/module.graphql.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/services/api/src/modules/operations/module.graphql.ts b/packages/services/api/src/modules/operations/module.graphql.ts
index a4eb6d2e3a..e1c4735132 100644
--- a/packages/services/api/src/modules/operations/module.graphql.ts
+++ b/packages/services/api/src/modules/operations/module.graphql.ts
@@ -363,7 +363,7 @@ export default gql`
     """
     Filter based on the operation type.
 
-    A value of 'null' value indicates a unknown operation type.
+    A value of 'null' value indicates an unknown operation type.
     """
     operationTypes: [GraphQLOperationType]
     """