feat: event definitions / events / trigger spans / settings (#953)

* feat: add events WIP

* feat: events

* feat: events v0 WIP

* feat: fix tooltip

* feat: complete event definition management

* feat: add settings trigger spans

* feat: update settings ui

* feat: events WIP

* feat: update ui, add proper types, last event query

* feat: update migration

* feat: update error in schema

* feat: add try parse

* feat: update ui, add togglable structured output, trace view

* feat: add cache cleanup, fix comment

* feat: update ui, hide events feature for free users, update queries

* feat: hide event crud for free users

* fix: missing semantic true

* feat: update wording, icon

* feat: fix placeholder

Author: olzhik11

frontend/app/api/projects/[projectId]/event-definitions/[id]/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { deleteEventDefinition, getEventDefinition, updateEventDefinition } from "@/lib/actions/event-definitions";
+
+export async function GET(_request: NextRequest, props: { params: Promise<{ projectId: string; id: string }> }) {
+  const params = await props.params;
+  const { id, projectId } = params;
+
+  try {
+    const result = await getEventDefinition({ id, projectId });
+
+    if (!result) {
+      return NextResponse.json({ error: "Event definition not found" }, { status: 404 });
+    }
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch event definition." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function PUT(request: NextRequest, props: { params: Promise<{ projectId: string; id: string }> }) {
+  const params = await props.params;
+  const { projectId, id } = params;
+
+  try {
+    const body = await request.json();
+
+    const result = await updateEventDefinition({ projectId, id, ...body });
+
+    if (!result) {
+      return NextResponse.json({ error: "Event definition not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to update event definition." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(_request: NextRequest, props: { params: Promise<{ projectId: string; id: string }> }) {
+  const params = await props.params;
+  const { projectId, id } = params;
+
+  try {
+    const result = await deleteEventDefinition({ projectId, id });
+
+    if (!result) {
+      return NextResponse.json({ error: "Event definition not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to delete event definition." },
+      { status: 500 }
+    );
+  }
+}

frontend/app/api/projects/[projectId]/event-definitions/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { createEventDefinition, getEventDefinitions } from "@/lib/actions/event-definitions";
+
+export async function GET(_request: NextRequest, props: { params: Promise<{ projectId: string }> }) {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  try {
+    const result = await getEventDefinitions({ projectId });
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch event definitions." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest, props: { params: Promise<{ projectId: string }> }) {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  try {
+    const body = await request.json();
+
+    const result = await createEventDefinition({ projectId, ...body });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to create event definition." },
+      { status: 500 }
+    );
+  }
+}

frontend/app/api/projects/[projectId]/events/[name]/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { parseUrlParams } from "@/lib/actions/common/utils";
+import { getEventsPaginated, GetEventsPaginatedSchema } from "@/lib/actions/events";
+
+export async function GET(
+  req: NextRequest,
+  props: { params: Promise<{ projectId: string; name: string }> }
+): Promise<Response> {
+  const params = await props.params;
+  const { projectId, name } = params;
+  const parseResult = parseUrlParams(
+    req.nextUrl.searchParams,
+    GetEventsPaginatedSchema.omit({ projectId: true, eventName: true })
+  );
+
+  if (!parseResult.success) {
+    return Response.json({ error: prettifyError(parseResult.error) }, { status: 400 });
+  }
+
+  try {
+    const result = await getEventsPaginated({ ...parseResult.data, projectId, eventName: name });
+    return Response.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return Response.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch events." },
+      { status: 500 }
+    );
+  }
+}

frontend/app/api/projects/[projectId]/summary-trigger-spans/[id]/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { deleteSummaryTriggerSpan } from "@/lib/actions/summary-trigger-spans";
+
+export async function DELETE(_request: NextRequest, props: { params: Promise<{ projectId: string; id: string }> }) {
+  const params = await props.params;
+  const { projectId, id } = params;
+
+  try {
+    const result = await deleteSummaryTriggerSpan({ projectId, id });
+
+    if (!result) {
+      return NextResponse.json({ error: "Summary trigger span not found" }, { status: 404 });
+    }
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to delete summary trigger span." },
+      { status: 500 }
+    );
+  }
+}
+

frontend/app/api/projects/[projectId]/summary-trigger-spans/route.ts

@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { createSummaryTriggerSpan, getSummaryTriggerSpans } from "@/lib/actions/summary-trigger-spans";
+
+export async function GET(_request: NextRequest, props: { params: Promise<{ projectId: string }> }) {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  try {
+    const result = await getSummaryTriggerSpans({ projectId });
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch summary trigger spans." },
+      { status: 500 }
+    );
+  }
+}
+
+export async function POST(request: NextRequest, props: { params: Promise<{ projectId: string }> }) {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  try {
+    const body = await request.json();
+
+    const result = await createSummaryTriggerSpan({ projectId, ...body });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return Response.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to create summary trigger span." },
+      { status: 500 }
+    );
+  }
+}
+

frontend/app/api/projects/[projectId]/summary-trigger-spans/unassigned/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prettifyError, ZodError } from "zod/v4";
+
+import { getUnassignedSummaryTriggerSpans } from "@/lib/actions/summary-trigger-spans";
+
+export async function GET(_request: NextRequest, props: { params: Promise<{ projectId: string }> }) {
+  const params = await props.params;
+  const projectId = params.projectId;
+
+  try {
+    const result = await getUnassignedSummaryTriggerSpans({ projectId });
+    return NextResponse.json(result);
+  } catch (error) {
+    if (error instanceof ZodError) {
+      return NextResponse.json({ error: prettifyError(error) }, { status: 400 });
+    }
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : "Failed to fetch unassigned summary trigger spans." },
+      { status: 500 }
+    );
+  }
+}

frontend/app/project/[projectId]/events/[id]/page.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from "next";
+import { cookies } from "next/headers";
+import { notFound } from "next/navigation";
+
+import Events from "@/components/events/events";
+import { EventsStoreProvider } from "@/components/events/events-store";
+import { EventDefinition, getEventDefinition } from "@/lib/actions/event-definitions";
+import { getLastEvent } from "@/lib/actions/events";
+import { EVENTS_TRACE_VIEW_WIDTH } from "@/lib/actions/traces";
+
+export const metadata: Metadata = {
+  title: "Events",
+};
+
+export default async function EventsPage(props: {
+  params: Promise<{ projectId: string; id: string }>;
+  searchParams: Promise<{ traceId?: string; spanId?: string }>;
+}) {
+  const { projectId, id } = await props.params;
+  const { traceId, spanId } = await props.searchParams;
+
+  const eventDefinition = (await getEventDefinition({ projectId, id })) as EventDefinition | undefined;
+  if (!eventDefinition) {
+    return notFound();
+  }
+
+  const lastEvent = await getLastEvent({ projectId, name: eventDefinition.name });
+
+  const cookieStore = await cookies();
+  const traceViewWidthCookie = cookieStore.get(EVENTS_TRACE_VIEW_WIDTH);
+  const initialTraceViewWidth = traceViewWidthCookie ? parseInt(traceViewWidthCookie.value, 10) : undefined;
+
+  return (
+    <EventsStoreProvider eventDefinition={eventDefinition} traceId={traceId} spanId={spanId}>
+      <Events lastEvent={lastEvent} initialTraceViewWidth={initialTraceViewWidth} />
+    </EventsStoreProvider>
+  );
+}

frontend/app/project/[projectId]/events/page.tsx

@@ -0,0 +1,18 @@
+import { Metadata } from "next";
+
+import EventDefinitions from "@/components/event-definitions/event-definitions";
+import { EventDefinitionsStoreProvider } from "@/components/event-definitions/event-definitions-store";
+
+export const metadata: Metadata = {
+  title: "Events",
+};
+
+export default async function EventsPage(props: { params: Promise<{ projectId: string }> }) {
+  const { projectId } = await props.params;
+
+  return (
+    <EventDefinitionsStoreProvider projectId={projectId}>
+      <EventDefinitions />
+    </EventDefinitionsStoreProvider>
+  );
+}

frontend/components/event-definitions/columns.tsx

@@ -0,0 +1,45 @@
+import { ColumnDef } from "@tanstack/react-table";
+import React from "react";
+
+import ClientTimestampFormatter from "@/components/client-timestamp-formatter.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import { EventDefinitionRow } from "@/lib/actions/event-definitions";
+
+export const columns: ColumnDef<EventDefinitionRow>[] = [
+  {
+    header: "Name",
+    accessorFn: (row) => row.name,
+    cell: ({ row }) => <span className="truncate">{row.original.name}</span>,
+  },
+  {
+    header: "Trigger Spans",
+    id: "triggerSpans",
+    accessorFn: (row) => row.triggerSpans,
+    cell: (row) => {
+      const spans = row.getValue() as string[];
+
+      if (spans?.length > 0) {
+        return (
+          <>
+            {spans.map((span) => (
+              <Badge key={span} className="rounded-3xl mr-1" variant="outline">
+                <span>{span}</span>
+              </Badge>
+            ))}
+          </>
+        );
+      }
+      return "-";
+    },
+  },
+  {
+    header: "Semantic",
+    accessorFn: (row) => row.isSemantic,
+    cell: ({ row }) => (row.original.isSemantic ? "Yes" : "No"),
+  },
+  {
+    header: "Created At",
+    accessorFn: (row) => row.createdAt,
+    cell: ({ row }) => <ClientTimestampFormatter timestamp={row.original.createdAt} />,
+  },
+];