From d7efcb86f953edcbfc36f388205a2c492ad8f00a Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 20 Mar 2026 15:28:52 +0000
Subject: [PATCH 01/24] feat: prompt management with service layer, dashboard
 UI, and AI span integration

---
 .../app/components/BlankStatePanels.tsx       |   54 +
 .../app/components/code/TSQLResultsTable.tsx  |   29 +-
 .../webapp/app/components/code/TextEditor.tsx |  125 ++
 .../app/components/metrics/PromptsFilter.tsx  |  125 ++
 .../app/components/metrics/QueryWidget.tsx    |    5 +
 .../app/components/navigation/SideMenu.tsx    |   33 +
 .../app/components/primitives/Resizable.tsx   |   23 +-
 .../components/runs/v3/PromptSpanDetails.tsx  |  163 ++
 .../app/components/runs/v3/SpanTitle.tsx      |    8 +-
 .../components/runs/v3/ai/AIChatMessages.tsx  |   75 +-
 .../components/runs/v3/ai/AIModelSummary.tsx  |   43 +-
 .../components/runs/v3/ai/AISpanDetails.tsx   |  152 +-
 .../runs/v3/ai/extractAISpanData.ts           |   13 +
 .../webapp/app/components/runs/v3/ai/types.ts |    8 +
 .../presenters/v3/BuiltInDashboards.server.ts |   11 +-
 .../v3/MetricDashboardPresenter.server.ts     |    2 +-
 .../presenters/v3/PromptPresenter.server.ts   |  332 +++
 .../app/presenters/v3/SpanPresenter.server.ts |   93 +-
 .../route.tsx                                 |   23 +
 .../route.tsx                                 | 1870 +++++++++++++++++
 .../route.tsx                                 |  191 ++
 .../route.tsx                                 |   21 +-
 ...pi.v1.prompts.$slug.override.reactivate.ts |   71 +
 .../routes/api.v1.prompts.$slug.override.ts   |  117 ++
 .../routes/api.v1.prompts.$slug.promote.ts    |   71 +
 .../webapp/app/routes/api.v1.prompts.$slug.ts |  174 ++
 .../routes/api.v1.prompts.$slug.versions.ts   |   56 +
 .../app/routes/api.v1.prompts._index.ts       |   37 +
 apps/webapp/app/routes/resources.metric.tsx   |    8 +
 ...nvParam.prompts.$promptSlug.generations.ts |   74 +
 .../route.tsx                                 |    6 +
 .../app/services/authorization.server.ts      |    2 +-
 .../app/services/queryService.server.ts       |    5 +
 apps/webapp/app/utils/pathBuilder.ts          |   19 +
 .../clickhouseEventRepository.server.ts       |    2 +
 .../eventRepository/eventRepository.types.ts  |    2 +
 apps/webapp/app/v3/querySchemas.ts            |   27 +
 .../services/createBackgroundWorker.server.ts |  132 ++
 .../app/v3/services/promptService.server.ts   |  142 ++
 .../v3/utils/enrichCreatableEvents.server.ts  |   33 +
 ...5_add_prompt_columns_to_llm_metrics_v1.sql |   13 +
 .../clickhouse/src/llmMetrics.ts              |    3 +
 .../migration.sql                             |   74 +
 .../migration.sql                             |    5 +
 .../database/prisma/schema.prisma             |   81 +-
 package.json                                  |    3 +-
 packages/cli-v3/src/dev/devSupervisor.ts      |    1 +
 .../src/entryPoints/dev-index-worker.ts       |   19 +
 .../src/entryPoints/managed-index-worker.ts   |   19 +
 packages/cli-v3/src/mcp/config.ts             |   42 +
 packages/cli-v3/src/mcp/tools.ts              |   21 +
 packages/cli-v3/src/mcp/tools/prompts.ts      |  386 ++++
 packages/core/src/v3/apiClient/index.ts       |   19 +
 .../core/src/v3/resource-catalog/catalog.ts   |    8 +-
 .../core/src/v3/resource-catalog/index.ts     |   20 +-
 .../resource-catalog/noopResourceCatalog.ts   |   20 +-
 .../standardResourceCatalog.ts                |   70 +-
 packages/core/src/v3/schemas/api.ts           |   21 +
 packages/core/src/v3/schemas/build.ts         |    3 +-
 packages/core/src/v3/schemas/resources.ts     |   18 +
 packages/core/src/v3/schemas/schemas.ts       |   20 +
 packages/core/src/v3/types/tasks.ts           |    8 +
 packages/trigger-sdk/src/v3/index.ts          |    1 +
 packages/trigger-sdk/src/v3/prompt.ts         |  236 +++
 packages/trigger-sdk/src/v3/prompts.ts        |    2 +
 patches/@window-splitter__state@0.4.1.patch   |   28 +
 pnpm-lock.yaml                                |  545 +++--
 references/hello-world/package.json           |    2 +
 references/hello-world/src/trigger/prompts.ts |  284 +++
 69 files changed, 6106 insertions(+), 243 deletions(-)
 create mode 100644 apps/webapp/app/components/code/TextEditor.tsx
 create mode 100644 apps/webapp/app/components/metrics/PromptsFilter.tsx
 create mode 100644 apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
 create mode 100644 apps/webapp/app/presenters/v3/PromptPresenter.server.ts
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
 create mode 100644 apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
 create mode 100644 apps/webapp/app/routes/api.v1.prompts.$slug.override.reactivate.ts
 create mode 100644 apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
 create mode 100644 apps/webapp/app/routes/api.v1.prompts.$slug.promote.ts
 create mode 100644 apps/webapp/app/routes/api.v1.prompts.$slug.ts
 create mode 100644 apps/webapp/app/routes/api.v1.prompts.$slug.versions.ts
 create mode 100644 apps/webapp/app/routes/api.v1.prompts._index.ts
 create mode 100644 apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
 create mode 100644 apps/webapp/app/v3/services/promptService.server.ts
 create mode 100644 internal-packages/clickhouse/schema/025_add_prompt_columns_to_llm_metrics_v1.sql
 create mode 100644 internal-packages/database/prisma/migrations/20260317221618_add_prompt_management/migration.sql
 create mode 100644 internal-packages/database/prisma/migrations/20260318114244_add_prompt_friendly_id/migration.sql
 create mode 100644 packages/cli-v3/src/mcp/tools/prompts.ts
 create mode 100644 packages/trigger-sdk/src/v3/prompt.ts
 create mode 100644 packages/trigger-sdk/src/v3/prompts.ts
 create mode 100644 patches/@window-splitter__state@0.4.1.patch
 create mode 100644 references/hello-world/src/trigger/prompts.ts

diff --git a/apps/webapp/app/components/BlankStatePanels.tsx b/apps/webapp/app/components/BlankStatePanels.tsx
index 7423bd61ac8..111e4efebb8 100644
--- a/apps/webapp/app/components/BlankStatePanels.tsx
+++ b/apps/webapp/app/components/BlankStatePanels.tsx
@@ -4,11 +4,13 @@ import {
   BookOpenIcon,
   ChatBubbleLeftRightIcon,
   ClockIcon,
+  DocumentTextIcon,
   PlusIcon,
   QuestionMarkCircleIcon,
   RectangleGroupIcon,
   RectangleStackIcon,
   ServerStackIcon,
+  SparklesIcon,
   Squares2X2Icon,
 } from "@heroicons/react/20/solid";
 import { useLocation } from "react-use";
@@ -686,3 +688,55 @@ function DeploymentOnboardingSteps() {
     </PackageManagerProvider>
   );
 }
+
+export function PromptsNone() {
+  return (
+    <InfoPanel
+      title="Define your first prompt"
+      icon={SparklesIcon}
+      iconClassName="text-purple-500"
+      panelClassName="max-w-lg"
+      accessory={
+        <LinkButton to={docsPath("prompt-management")} variant="docs/small" LeadingIcon={BookOpenIcon}>
+          Prompt docs
+        </LinkButton>
+      }
+    >
+      <Paragraph spacing variant="small">
+        Managed prompts let you define AI prompts in code with typesafe variables, then edit and
+        version them from the dashboard without redeploying.
+      </Paragraph>
+      <Paragraph spacing variant="small">
+        Add a prompt to your project using <InlineCode variant="small">prompts.define()</InlineCode>:
+      </Paragraph>
+      <div className="rounded border border-grid-dimmed bg-charcoal-900 p-3">
+        <pre className="text-xs leading-relaxed text-text-dimmed">
+          <span className="text-purple-400">import</span>
+          {" { prompts } "}
+          <span className="text-purple-400">from</span>
+          {' "@trigger.dev/sdk";\n'}
+          <span className="text-purple-400">import</span>
+          {" { z } "}
+          <span className="text-purple-400">from</span>
+          {' "zod";\n\n'}
+          <span className="text-purple-400">export const</span>
+          {" myPrompt = "}
+          <span className="text-blue-400">prompts.define</span>
+          {"({\n"}
+          {"  id: "}
+          <span className="text-green-400">"my-prompt"</span>
+          {",\n"}
+          {"  variables: z.object({\n"}
+          {"    name: z.string(),\n"}
+          {"  }),\n"}
+          {"  content: "}
+          <span className="text-green-400">{"`Hello {{name}}!`"}</span>
+          {",\n"});</pre>
+      </div>
+      <Paragraph variant="small" className="mt-2">
+        Deploy your project and your prompts will appear here with version history and a live
+        editor.
+      </Paragraph>
+    </InfoPanel>
+  );
+}
diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index b2caf74dac6..73ca07180bf 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -460,10 +460,12 @@ function CellValueWrapper({
   value,
   column,
   prettyFormatting,
+  row,
 }: {
   value: unknown;
   column: OutputColumnMetadata;
   prettyFormatting: boolean;
+  row?: Record<string, unknown>;
 }) {
   const [hovered, setHovered] = useState(false);
 
@@ -478,6 +480,7 @@ function CellValueWrapper({
         column={column}
         prettyFormatting={prettyFormatting}
         hovered={hovered}
+        row={row}
       />
     </span>
   );
@@ -491,11 +494,13 @@ function CellValue({
   column,
   prettyFormatting = true,
   hovered = false,
+  row,
 }: {
   value: unknown;
   column: OutputColumnMetadata;
   prettyFormatting?: boolean;
   hovered?: boolean;
+  row?: Record<string, unknown>;
 }) {
   // Plain text mode - render everything as monospace text with truncation
   if (!prettyFormatting) {
@@ -562,12 +567,20 @@ function CellValue({
     switch (column.customRenderType) {
       case "runId": {
         if (typeof value === "string") {
+          const spanId = row?.["span_id"];
+          const runPath = v3RunPathFromFriendlyId(value);
+          const href = typeof spanId === "string" && spanId
+            ? `${runPath}?span=${spanId}`
+            : runPath;
+          const tooltip = typeof spanId === "string" && spanId
+            ? "Jump to span"
+            : "Jump to run";
           return (
             <SimpleTooltip
-              content="Jump to run"
+              content={tooltip}
               disableHoverableContent
               hidden={!hovered}
-              button={<TextLink to={v3RunPathFromFriendlyId(value)}>{value}</TextLink>}
+              button={<TextLink to={href}>{value}</TextLink>}
             />
           );
         }
@@ -1010,6 +1023,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   prettyFormatting = true,
   sorting: defaultSorting = [],
   showHeaderOnEmpty = false,
+  hiddenColumns,
 }: {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
@@ -1017,6 +1031,8 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   sorting?: SortingState;
   /** When true, show column headers + "No results" on empty data. When false, show a blank state icon. */
   showHeaderOnEmpty?: boolean;
+  /** Column names to hide from display but keep in row data (useful for linking) */
+  hiddenColumns?: string[];
 }) {
   const tableContainerRef = useRef<HTMLDivElement>(null);
 
@@ -1030,9 +1046,13 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
 
   // Create TanStack Table column definitions from OutputColumnMetadata
   // Calculate column widths based on content
+  const visibleColumns = useMemo(
+    () => hiddenColumns?.length ? columns.filter((col) => !hiddenColumns.includes(col.name)) : columns,
+    [columns, hiddenColumns]
+  );
   const columnDefs = useMemo<ColumnDef<RowData, unknown>[]>(
     () =>
-      columns.map((col) => ({
+      visibleColumns.map((col) => ({
         id: col.name,
         accessorKey: col.name,
         header: () => col.name,
@@ -1041,6 +1061,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
             value={info.getValue()}
             column={col}
             prettyFormatting={prettyFormatting}
+            row={info.row.original}
           />
         ),
         meta: {
@@ -1050,7 +1071,7 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
         size: calculateColumnWidth(col.name, rows, col),
         filterFn: fuzzyFilter,
       })),
-    [columns, rows, prettyFormatting]
+    [visibleColumns, rows, prettyFormatting]
   );
 
   // Initialize TanStack Table
diff --git a/apps/webapp/app/components/code/TextEditor.tsx b/apps/webapp/app/components/code/TextEditor.tsx
new file mode 100644
index 00000000000..db16b996462
--- /dev/null
+++ b/apps/webapp/app/components/code/TextEditor.tsx
@@ -0,0 +1,125 @@
+import type { ViewUpdate } from "@codemirror/view";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { CheckIcon, ClipboardIcon } from "@heroicons/react/20/solid";
+import type { ReactCodeMirrorProps, UseCodeMirror } from "@uiw/react-codemirror";
+import { useCodeMirror } from "@uiw/react-codemirror";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "~/utils/cn";
+import { Button } from "../primitives/Buttons";
+import { getEditorSetup } from "./codeMirrorSetup";
+import { darkTheme } from "./codeMirrorTheme";
+
+export interface TextEditorProps extends Omit<ReactCodeMirrorProps, "onBlur"> {
+  defaultValue?: string;
+  readOnly?: boolean;
+  onChange?: (value: string) => void;
+  onUpdate?: (update: ViewUpdate) => void;
+  showCopyButton?: boolean;
+  additionalActions?: React.ReactNode;
+}
+
+export function TextEditor(opts: TextEditorProps) {
+  const {
+    defaultValue = "",
+    readOnly = false,
+    onChange,
+    onUpdate,
+    autoFocus,
+    showCopyButton = true,
+    additionalActions,
+  } = opts;
+
+  // Don't use default line numbers from setup — add our own with proper sizing
+  const extensions = getEditorSetup(false);
+  extensions.push(EditorView.lineWrapping);
+  extensions.push(
+    lineNumbers({
+      formatNumber: (n) => String(n),
+    })
+  );
+  extensions.push(
+    EditorView.theme({
+      ".cm-lineNumbers": {
+        minWidth: "40px",
+      },
+    })
+  );
+
+  const editor = useRef<HTMLDivElement>(null);
+  const settings: Omit<UseCodeMirror, "onBlur"> = {
+    ...opts,
+    container: editor.current,
+    extensions,
+    editable: !readOnly,
+    contentEditable: !readOnly,
+    value: defaultValue,
+    autoFocus,
+    theme: darkTheme(),
+    indentWithTab: false,
+    basicSetup: false,
+    onChange,
+    onUpdate,
+  };
+  const { setContainer, view } = useCodeMirror(settings);
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (editor.current) {
+      setContainer(editor.current);
+    }
+  }, [setContainer]);
+
+  useEffect(() => {
+    if (view !== undefined) {
+      if (view.state.doc.toString() === defaultValue) return;
+      view.dispatch({
+        changes: { from: 0, to: view.state.doc.length, insert: defaultValue },
+      });
+    }
+  }, [defaultValue, view]);
+
+  const copy = useCallback(() => {
+    if (view === undefined) return;
+    navigator.clipboard.writeText(view.state.doc.toString());
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [view]);
+
+  const showToolbar = showCopyButton || additionalActions;
+
+  return (
+    <div
+      className={cn(
+        "grid",
+        showToolbar ? "grid-rows-[2.5rem_1fr]" : "grid-rows-[1fr]",
+        opts.className
+      )}
+    >
+      {showToolbar && (
+        <div className="mx-3 flex items-center justify-between gap-2 border-b border-grid-dimmed">
+          <div className="flex items-center">{additionalActions}</div>
+          <div className="flex items-center gap-2">
+            {showCopyButton && (
+              <Button
+                type="button"
+                variant="minimal/small"
+                TrailingIcon={copied ? CheckIcon : ClipboardIcon}
+                trailingIconClassName={
+                  copied ? "text-green-500 group-hover:text-green-500" : undefined
+                }
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  copy();
+                }}
+              >
+                Copy
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+      <div className="min-h-0 min-w-0 overflow-auto" ref={editor} />
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/metrics/PromptsFilter.tsx b/apps/webapp/app/components/metrics/PromptsFilter.tsx
new file mode 100644
index 00000000000..a4ad8a00045
--- /dev/null
+++ b/apps/webapp/app/components/metrics/PromptsFilter.tsx
@@ -0,0 +1,125 @@
+import { DocumentTextIcon } from "@heroicons/react/20/solid";
+import * as Ariakit from "@ariakit/react";
+import { type ReactNode, useMemo } from "react";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import {
+  ComboBox,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+
+const shortcut = { key: "p" };
+
+interface PromptsFilterProps {
+  possiblePrompts: string[];
+}
+
+export function PromptsFilter({ possiblePrompts }: PromptsFilterProps) {
+  const { values, replace, del } = useSearchParams();
+  const selectedPrompts = values("prompts");
+
+  if (selectedPrompts.length === 0 || selectedPrompts.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <PromptsDropdown
+            trigger={
+              <SelectTrigger
+                icon={<DocumentTextIcon className="size-4" />}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by prompt"
+              >
+                <span className="ml-0.5">Prompts</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+            possiblePrompts={possiblePrompts}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <PromptsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Prompt"
+                icon={<DocumentTextIcon className="size-4" />}
+                value={appliedSummary(selectedPrompts)}
+                onRemove={() => del(["prompts"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          possiblePrompts={possiblePrompts}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function PromptsDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  possiblePrompts,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  possiblePrompts: string[];
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ prompts: values });
+  };
+
+  const filtered = useMemo(() => {
+    return possiblePrompts.filter((p) => {
+      return p.toLowerCase().includes(searchValue.toLowerCase());
+    });
+  }, [searchValue, possiblePrompts]);
+
+  return (
+    <SelectProvider value={values("prompts")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+          return true;
+        }}
+      >
+        <ComboBox placeholder="Filter by prompt..." value={searchValue} />
+        <SelectList>
+          {filtered.map((slug) => (
+            <SelectItem key={slug} value={slug} icon={<DocumentTextIcon className="size-4" />}>
+              {slug}
+            </SelectItem>
+          ))}
+          {filtered.length === 0 && <SelectItem disabled>No prompts found</SelectItem>}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
diff --git a/apps/webapp/app/components/metrics/QueryWidget.tsx b/apps/webapp/app/components/metrics/QueryWidget.tsx
index 1dcf1703993..cde5465721b 100644
--- a/apps/webapp/app/components/metrics/QueryWidget.tsx
+++ b/apps/webapp/app/components/metrics/QueryWidget.tsx
@@ -156,6 +156,8 @@ export type QueryWidgetProps = {
   onDuplicate?: (data: QueryWidgetData) => void;
   /** When true, show table column headers even when there are no rows */
   showTableHeaderOnEmpty?: boolean;
+  /** Column names to hide from table display but keep in row data (useful for linking) */
+  hiddenColumns?: string[];
 };
 
 export function QueryWidget({
@@ -406,6 +408,7 @@ type QueryWidgetBodyProps = {
   setIsFullscreen: (open: boolean) => void;
   isLoading: boolean;
   showTableHeaderOnEmpty?: boolean;
+  hiddenColumns?: string[];
 };
 
 function QueryWidgetBody({
@@ -417,6 +420,7 @@ function QueryWidgetBody({
   setIsFullscreen,
   isLoading,
   showTableHeaderOnEmpty,
+  hiddenColumns,
 }: QueryWidgetBodyProps) {
   const type = config.type;
 
@@ -436,6 +440,7 @@ function QueryWidgetBody({
             prettyFormatting={config.prettyFormatting}
             sorting={config.sorting}
             showHeaderOnEmpty={showTableHeaderOnEmpty}
+            hiddenColumns={hiddenColumns}
           />
           <Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
             <DialogContent
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 89bf139c981..1a1521bc68b 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -20,7 +20,9 @@ import {
   PencilSquareIcon,
   PlusIcon,
   RectangleStackIcon,
+  DocumentTextIcon,
   ServerStackIcon,
+  SparklesIcon,
   Squares2X2Icon,
   TableCellsIcon,
   UsersIcon,
@@ -75,6 +77,7 @@ import {
   v3EnvironmentVariablesPath,
   v3LogsPath,
   v3ErrorsPath,
+  v3PromptsPath,
   v3ProjectAlertsPath,
   v3ProjectPath,
   v3ProjectSettingsGeneralPath,
@@ -454,6 +457,36 @@ export function SideMenu({
               />
             </div>
 
+            <SideMenuSection
+              title="AI"
+              isSideMenuCollapsed={isCollapsed}
+              itemSpacingClassName="space-y-0"
+              initialCollapsed={getSectionCollapsed(
+                user.dashboardPreferences.sideMenu,
+                "ai"
+              )}
+              onCollapseToggle={handleSectionToggle("ai")}
+            >
+              <SideMenuItem
+                name="Prompts"
+                icon={DocumentTextIcon}
+                activeIconColor="text-purple-500"
+                inactiveIconColor="text-purple-500"
+                to={v3PromptsPath(organization, project, environment)}
+                data-action="prompts"
+                isCollapsed={isCollapsed}
+              />
+              <SideMenuItem
+                name="AI Metrics"
+                icon={SparklesIcon}
+                activeIconColor="text-purple-500"
+                inactiveIconColor="text-purple-500"
+                to={v3BuiltInDashboardPath(organization, project, environment, "llm")}
+                data-action="ai-metrics"
+                isCollapsed={isCollapsed}
+              />
+            </SideMenuSection>
+
             {(user.admin || user.isImpersonating || featureFlags.hasQueryAccess) && (
               <SideMenuSection
                 title="Observability"
diff --git a/apps/webapp/app/components/primitives/Resizable.tsx b/apps/webapp/app/components/primitives/Resizable.tsx
index df0bd88e05c..556658080bf 100644
--- a/apps/webapp/app/components/primitives/Resizable.tsx
+++ b/apps/webapp/app/components/primitives/Resizable.tsx
@@ -4,16 +4,19 @@ import React from "react";
 import { PanelGroup, Panel, PanelResizer } from "react-window-splitter";
 import { cn } from "~/utils/cn";
 
-const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof PanelGroup>) => (
-  <PanelGroup
-    className={cn(
-      "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    autosaveStrategy={props.autosaveId ? "cookie" : undefined}
-    {...props}
-  />
-);
+const ResizablePanelGroup = ({ className, snapshot, ...props }: React.ComponentProps<typeof PanelGroup>) => {
+  return (
+    <PanelGroup
+      className={cn(
+        "flex w-full overflow-hidden data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      autosaveStrategy={props.autosaveId ? "cookie" : undefined}
+      snapshot={snapshot}
+      {...props}
+    />
+  );
+};
 
 const ResizablePanel = Panel;
 
diff --git a/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
new file mode 100644
index 00000000000..9e8c1fc2b76
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
@@ -0,0 +1,163 @@
+import { lazy, Suspense, useState } from "react";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { Header3 } from "~/components/primitives/Headers";
+
+import { TextLink } from "~/components/primitives/TextLink";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { v3PromptPath } from "~/utils/pathBuilder";
+import { TabButton, TabContainer } from "~/components/primitives/Tabs";
+import type { PromptSpanData } from "~/presenters/v3/SpanPresenter.server";
+
+const StreamdownRenderer = lazy(() =>
+  import("streamdown").then((mod) => ({
+    default: ({ children }: { children: string }) => (
+      <mod.ShikiThemeContext.Provider value={["one-dark-pro", "one-dark-pro"]}>
+        <mod.Streamdown isAnimating={false}>{children}</mod.Streamdown>
+      </mod.ShikiThemeContext.Provider>
+    ),
+  }))
+);
+
+type PromptTab = "overview" | "input" | "template";
+
+export function PromptSpanDetails({ promptData }: { promptData: PromptSpanData }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const promptPath =
+    organization && project && environment
+      ? v3PromptPath(organization, project, environment, promptData.slug, promptData.version)
+      : undefined;
+
+  const hasInput = !!promptData.input;
+  const hasTemplate = !!promptData.template;
+
+  const availableTabs: PromptTab[] = [
+    "overview",
+    ...(hasInput ? (["input"] as const) : []),
+    ...(hasTemplate ? (["template"] as const) : []),
+  ];
+  const [tab, setTab] = useState<PromptTab>("overview");
+
+  const labels = promptData.labels
+    ? promptData.labels
+        .split(",")
+        .map((l) => l.trim())
+        .filter(Boolean)
+    : [];
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="shrink-0 overflow-x-auto px-3 py-1 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <TabContainer>
+          {availableTabs.map((t) => (
+            <TabButton
+              key={t}
+              isActive={tab === t}
+              layoutId="prompt-span"
+              onClick={() => setTab(t)}
+              shortcut={
+                t === "overview" ? { key: "o" } : t === "input" ? { key: "i" } : { key: "t" }
+              }
+            >
+              {t === "overview" ? "Overview" : t === "input" ? "Input" : "Template"}
+            </TabButton>
+          ))}
+        </TabContainer>
+      </div>
+
+      <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        {tab === "overview" && (
+          <div className="flex flex-col px-3">
+            <div className="flex flex-col gap-1 py-2.5">
+              <div className="flex flex-col text-xs @container">
+                <MetricRow
+                  label="Prompt"
+                  value={
+                    promptPath ? (
+                      <TextLink to={promptPath}>{promptData.slug}</TextLink>
+                    ) : (
+                      promptData.slug
+                    )
+                  }
+                />
+                <MetricRow label="Version" value={`v${promptData.version}`} />
+                {labels.length > 0 && <MetricRow label="Labels" value={labels.join(", ")} />}
+                {promptData.model && <MetricRow label="Model" value={promptData.model} />}
+              </div>
+            </div>
+
+            {promptData.text && (
+              <div className="flex flex-col gap-1.5 py-2.5">
+                <Header3>Resolved content</Header3>
+                <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+                  <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
+                    <Suspense
+                      fallback={
+                        <span className="whitespace-pre-wrap">
+                          {promptData.text.length > 300
+                            ? promptData.text.slice(0, 300) + "..."
+                            : promptData.text}
+                        </span>
+                      }
+                    >
+                      <StreamdownRenderer>{promptData.text}</StreamdownRenderer>
+                    </Suspense>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {tab === "input" && hasInput && (
+          <div className="px-3 py-2.5">
+            <CodeBlock
+              code={tryPrettyJson(promptData.input!)}
+              maxLines={30}
+              showLineNumbers={false}
+              showCopyButton
+              language="json"
+            />
+          </div>
+        )}
+
+        {tab === "template" && hasTemplate && (
+          <div className="px-3 py-2.5">
+            <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+              <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
+                <Suspense
+                  fallback={
+                    <span className="whitespace-pre-wrap">{promptData.template!}</span>
+                  }
+                >
+                  <StreamdownRenderer>{promptData.template!}</StreamdownRenderer>
+                </Suspense>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+      <span className="text-text-dimmed">{label}</span>
+      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
+    </div>
+  );
+}
+
+function tryPrettyJson(raw: string): string {
+  try {
+    return JSON.stringify(JSON.parse(raw), null, 2);
+  } catch {
+    return raw;
+  }
+}
diff --git a/apps/webapp/app/components/runs/v3/SpanTitle.tsx b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
index fe85fd70c9e..2be7bfdcbdd 100644
--- a/apps/webapp/app/components/runs/v3/SpanTitle.tsx
+++ b/apps/webapp/app/components/runs/v3/SpanTitle.tsx
@@ -49,22 +49,22 @@ function SpanAccessory({
     }
     case "pills": {
       return (
-        <div className="flex items-center gap-1">
+        <span className="flex items-center gap-1">
           {accessory.items.map((item, index) => (
             <SpanPill key={index} text={item.text} icon={item.icon} />
           ))}
-        </div>
+        </span>
       );
     }
     default: {
       return (
-        <div className={cn("flex gap-1")}>
+        <span className={cn("flex gap-1")}>
           {accessory.items.map((item, index) => (
             <span key={index} className={cn("inline-flex items-center gap-1")}>
               {item.text}
             </span>
           ))}
-        </div>
+        </span>
       );
     }
   }
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index 9e5a799e1bc..b45b0832967 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -1,9 +1,16 @@
-import { CheckIcon, ClipboardDocumentIcon, CodeBracketSquareIcon } from "@heroicons/react/20/solid";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ClipboardDocumentIcon,
+  CodeBracketSquareIcon,
+} from "@heroicons/react/20/solid";
 import { lazy, Suspense, useState } from "react";
 import { CodeBlock } from "~/components/code/CodeBlock";
-import { Button } from "~/components/primitives/Buttons";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
 import type { DisplayItem, ToolUse } from "./types";
 
 // Lazy load streamdown to avoid SSR issues
@@ -17,13 +24,25 @@ const StreamdownRenderer = lazy(() =>
   }))
 );
 
-export function AIChatMessages({ items }: { items: DisplayItem[] }) {
+export type PromptLink = {
+  slug: string;
+  version?: string;
+  path: string;
+};
+
+export function AIChatMessages({
+  items,
+  promptLink,
+}: {
+  items: DisplayItem[];
+  promptLink?: PromptLink;
+}) {
   return (
     <div className="flex flex-col gap-1">
       {items.map((item, i) => {
         switch (item.type) {
           case "system":
-            return <SystemSection key={i} text={item.text} />;
+            return <SystemSection key={i} text={item.text} promptLink={promptLink} />;
           case "user":
             return <UserSection key={i} text={item.text} />;
           case "tool-use":
@@ -61,7 +80,13 @@ export function ChatBubble({ children }: { children: React.ReactNode }) {
 // System
 // ---------------------------------------------------------------------------
 
-function SystemSection({ text }: { text: string }) {
+function SystemSection({
+  text,
+  promptLink,
+}: {
+  text: string;
+  promptLink?: PromptLink;
+}) {
   const [expanded, setExpanded] = useState(false);
   const isLong = text.length > 150;
   const preview = isLong ? text.slice(0, 150) + "..." : text;
@@ -69,19 +94,29 @@ function SystemSection({ text }: { text: string }) {
 
   return (
     <div className="flex flex-col gap-1.5 py-2.5">
-      <SectionHeader
-        label="System"
-        right={
-          isLong ? (
-            <button
-              onClick={() => setExpanded(!expanded)}
-              className="text-[10px] text-text-link hover:underline"
-            >
-              {expanded ? "Collapse" : "Expand"}
-            </button>
-          ) : undefined
-        }
-      />
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <Header3>System</Header3>
+          {promptLink && (
+            <LinkButton to={promptLink.path} variant="minimal/small">
+              <span className="flex items-center gap-1">
+                <svg className="size-3.5 shrink-0 text-text-dimmed">
+                  <use xlinkHref={`${tablerSpritePath}#tabler-file-text-ai`} />
+                </svg>
+                {promptLink.slug}
+                {promptLink.version ? ` v${promptLink.version}` : ""}
+              </span>
+            </LinkButton>
+          )}
+        </div>
+        {isLong && (
+          <Button
+            variant="minimal/small"
+            onClick={() => setExpanded(!expanded)}
+            LeadingIcon={expanded ? ChevronUpIcon : ChevronDownIcon}
+          />
+        )}
+      </div>
       <ChatBubble>
         <Paragraph variant="small/dimmed" className="streamdown-container">
           <Suspense fallback={<span className="whitespace-pre-wrap">{displayText}</span>}>
@@ -185,11 +220,11 @@ export function AssistantResponse({
       />
       {mode === "rendered" ? (
         <ChatBubble>
-          <Paragraph variant="small/dimmed" className="streamdown-container">
+          <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
             <Suspense fallback={<span className="whitespace-pre-wrap">{text}</span>}>
               <StreamdownRenderer>{text}</StreamdownRenderer>
             </Suspense>
-          </Paragraph>
+          </div>
         </ChatBubble>
       ) : (
         <CodeBlock
diff --git a/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx b/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
index 62341fc9041..95cf0001824 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIModelSummary.tsx
@@ -1,16 +1,50 @@
+import type { ReactNode } from "react";
 import { formatCurrencyAccurate } from "~/utils/numberFormatter";
 import { Header3 } from "~/components/primitives/Headers";
+import { TextLink } from "~/components/primitives/TextLink";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { v3PromptPath } from "~/utils/pathBuilder";
+import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
 import type { AISpanData } from "./types";
 
 export function AITagsRow({ aiData }: { aiData: AISpanData }) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const promptLink =
+    aiData.promptSlug && organization && project && environment
+      ? v3PromptPath(organization, project, environment, aiData.promptSlug, aiData.promptVersion)
+      : undefined;
+
   return (
     <div className="flex flex-col gap-1 py-2.5">
       <div className="flex flex-col text-xs @container">
+        {aiData.responseId && (
+          <MetricRow label="Response ID" value={<TruncatedCopyableValue value={aiData.responseId} />} />
+        )}
         <MetricRow label="Model" value={aiData.model} />
         {aiData.provider !== "unknown" && <MetricRow label="Provider" value={aiData.provider} />}
         {aiData.resolvedProvider && (
           <MetricRow label="Resolved provider" value={aiData.resolvedProvider} />
         )}
+        {aiData.promptSlug && (
+          <MetricRow
+            label="Prompt"
+            value={
+              promptLink ? (
+                <TextLink to={promptLink}>
+                  {aiData.promptSlug}
+                  {aiData.promptVersion ? ` v${aiData.promptVersion}` : ""}
+                </TextLink>
+              ) : (
+                `${aiData.promptSlug}${aiData.promptVersion ? ` v${aiData.promptVersion}` : ""}`
+              )
+            }
+          />
+        )}
         {aiData.finishReason && <MetricRow label="Finish reason" value={aiData.finishReason} />}
         {aiData.serviceTier && <MetricRow label="Service tier" value={aiData.serviceTier} />}
         {aiData.toolChoice && <MetricRow label="Tool choice" value={aiData.toolChoice} />}
@@ -27,9 +61,9 @@ export function AITagsRow({ aiData }: { aiData: AISpanData }) {
           />
         )}
         {aiData.telemetryMetadata &&
-          Object.entries(aiData.telemetryMetadata).map(([key, value]) => (
-            <MetricRow key={key} label={key} value={value} />
-          ))}
+          Object.entries(aiData.telemetryMetadata)
+            .filter(([key]) => key !== "prompt")
+            .map(([key, value]) => <MetricRow key={key} label={key} value={value} />)}
       </div>
     </div>
   );
@@ -86,7 +120,7 @@ function MetricRow({
   bold,
 }: {
   label: string;
-  value: string;
+  value: ReactNode;
   unit?: string;
   bold?: boolean;
 }) {
@@ -111,3 +145,4 @@ function formatTtfc(ms: number): string {
   }
   return `${Math.round(ms)}ms`;
 }
+
diff --git a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
index 0070c7ffe3c..5972a54c17f 100644
--- a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -1,29 +1,61 @@
 import { CheckIcon, ClipboardDocumentIcon } from "@heroicons/react/20/solid";
-import { useState } from "react";
+import { lazy, Suspense, useState } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
+import { TextLink } from "~/components/primitives/TextLink";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
 import { useHasAdminAccess } from "~/hooks/useUser";
+import { v3PromptPath } from "~/utils/pathBuilder";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { AIChatMessages, AssistantResponse, ChatBubble } from "./AIChatMessages";
+import type { PromptLink } from "./AIChatMessages";
 import { AIStatsSummary, AITagsRow } from "./AIModelSummary";
 import { AIToolsInventory } from "./AIToolsInventory";
 import type { AISpanData, DisplayItem } from "./types";
+import type { PromptSpanData } from "~/presenters/v3/SpanPresenter.server";
 
-type AITab = "overview" | "messages" | "tools";
+const StreamdownRenderer = lazy(() =>
+  import("streamdown").then((mod) => ({
+    default: ({ children }: { children: string }) => (
+      <mod.ShikiThemeContext.Provider value={["one-dark-pro", "one-dark-pro"]}>
+        <mod.Streamdown isAnimating={false}>{children}</mod.Streamdown>
+      </mod.ShikiThemeContext.Provider>
+    ),
+  }))
+);
+
+type AITab = "overview" | "messages" | "tools" | "prompt";
 
 export function AISpanDetails({
   aiData,
+  promptVersionData,
   rawProperties,
 }: {
   aiData: AISpanData;
+  promptVersionData?: PromptSpanData;
   rawProperties?: string;
 }) {
   const [tab, setTab] = useState<AITab>("overview");
   const isAdmin = useHasAdminAccess();
   const toolCount = aiData.toolCount ?? aiData.toolDefinitions?.length ?? 0;
 
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  const promptLink: PromptLink | undefined =
+    aiData.promptSlug && organization && project && environment
+      ? {
+          slug: aiData.promptSlug,
+          version: aiData.promptVersion,
+          path: v3PromptPath(organization, project, environment, aiData.promptSlug, aiData.promptVersion),
+        }
+      : undefined;
+
   return (
     <div className="flex h-full flex-col overflow-hidden">
       {/* Tab bar */}
@@ -60,14 +92,27 @@ export function AISpanDetails({
               )}
             </span>
           </TabButton>
+          {promptVersionData && (
+            <TabButton
+              isActive={tab === "prompt"}
+              layoutId="ai-span"
+              onClick={() => setTab("prompt")}
+              shortcut={{ key: "p" }}
+            >
+              Prompt
+            </TabButton>
+          )}
         </TabContainer>
       </div>
 
       {/* Tab content */}
       <div className="scrollbar-gutter-stable min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         {tab === "overview" && <OverviewTab aiData={aiData} />}
-        {tab === "messages" && <MessagesTab aiData={aiData} />}
+        {tab === "messages" && <MessagesTab aiData={aiData} promptLink={promptLink} />}
         {tab === "tools" && <ToolsTab aiData={aiData} />}
+        {tab === "prompt" && promptVersionData && (
+          <PromptTab promptData={promptVersionData} promptLink={promptLink} />
+        )}
       </div>
 
       {/* Footer: Copy raw (admin only) */}
@@ -121,7 +166,13 @@ function OverviewTab({ aiData }: { aiData: AISpanData }) {
   );
 }
 
-function MessagesTab({ aiData }: { aiData: AISpanData }) {
+function MessagesTab({
+  aiData,
+  promptLink,
+}: {
+  aiData: AISpanData;
+  promptLink?: PromptLink;
+}) {
   const showFallbackText = aiData.responseText && !hasAssistantItem(aiData.items);
   const showFallbackObject =
     !showFallbackText && aiData.responseObject && !hasAssistantItem(aiData.items);
@@ -129,7 +180,9 @@ function MessagesTab({ aiData }: { aiData: AISpanData }) {
   return (
     <div className="px-3">
       <div className="flex flex-col">
-        {aiData.items && aiData.items.length > 0 && <AIChatMessages items={aiData.items} />}
+        {aiData.items && aiData.items.length > 0 && (
+          <AIChatMessages items={aiData.items} promptLink={promptLink} />
+        )}
         {showFallbackText && <AssistantResponse text={aiData.responseText!} />}
         {showFallbackObject && (
           <div className="flex flex-col gap-1.5 py-2.5">
@@ -175,6 +228,88 @@ function CopyRawFooter({ rawProperties }: { rawProperties: string }) {
   );
 }
 
+function PromptTab({
+  promptData,
+  promptLink,
+}: {
+  promptData: PromptSpanData;
+  promptLink?: PromptLink;
+}) {
+  const labels = promptData.labels
+    ? promptData.labels.split(",").map((l) => l.trim()).filter(Boolean)
+    : [];
+
+  return (
+    <div className="flex flex-col px-3">
+      {/* Prompt properties */}
+      <div className="flex flex-col gap-1 py-2.5">
+        <div className="flex flex-col text-xs @container">
+          <PromptMetricRow
+            label="Prompt"
+            value={
+              promptLink ? (
+                <TextLink to={promptLink.path}>{promptData.slug}</TextLink>
+              ) : (
+                promptData.slug
+              )
+            }
+          />
+          <PromptMetricRow label="Version" value={`v${promptData.version}`} />
+          {labels.length > 0 && <PromptMetricRow label="Labels" value={labels.join(", ")} />}
+          {promptData.model && <PromptMetricRow label="Model" value={promptData.model} />}
+        </div>
+      </div>
+
+      {/* Prompt input (variables passed to resolve()) */}
+      {promptData.input && (
+        <div className="flex flex-col gap-1.5 py-2.5">
+          <Header3>Input</Header3>
+          <CodeBlock
+            code={tryPrettyJson(promptData.input)}
+            maxLines={20}
+            showLineNumbers={false}
+            showCopyButton
+            language="json"
+          />
+        </div>
+      )}
+
+      {/* Template (from the prompt version) */}
+      {promptData.template && (
+        <div className="flex flex-col gap-1.5 py-2.5">
+          <Header3>Template</Header3>
+          <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+            <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
+              <Suspense
+                fallback={<span className="whitespace-pre-wrap">{promptData.template}</span>}
+              >
+                <StreamdownRenderer>{promptData.template}</StreamdownRenderer>
+              </Suspense>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function PromptMetricRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+      <span className="text-text-dimmed">{label}</span>
+      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
+    </div>
+  );
+}
+
+function tryPrettyJson(value: string): string {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -216,7 +351,12 @@ function extractInputOutput(aiData: AISpanData): {
     outputText = aiData.responseText;
   }
 
-  return { userText, outputText, outputObject: aiData.responseObject, outputToolNames };
+  return {
+    userText,
+    outputText,
+    outputObject: aiData.responseObject ? tryPrettyJson(aiData.responseObject) : undefined,
+    outputToolNames,
+  };
 }
 
 function hasAssistantItem(items: DisplayItem[] | undefined): boolean {
diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
index dbe9b61d952..a98522ba9aa 100644
--- a/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
@@ -51,12 +51,20 @@ export function extractAISpanData(
   const toolDefs = parseToolDefinitions(aiPrompt.tools);
   const providerMeta = parseProviderMetadata(aiResponse.providerMetadata);
   const aiTelemetry = rec(ai.telemetry);
+  const telemetryMetaRaw = rec(aiTelemetry.metadata);
+  const promptMeta = rec(telemetryMetaRaw.prompt);
+  const promptSlug = str(promptMeta.slug);
+  const promptVersion = str(promptMeta.version);
+  const promptModel = str(promptMeta.model);
+  const promptLabels = str(promptMeta.labels);
+  const promptInput = str(promptMeta.input);
   const telemetryMeta = extractTelemetryMetadata(aiTelemetry.metadata);
 
   return {
     model,
     provider: str(g.system) ?? "unknown",
     operationName: str(gOperation.name) ?? str(ai.operationId) ?? "",
+    responseId: str(gResponse.id) || undefined,
     finishReason: str(aiResponse.finishReason),
     serviceTier: providerMeta?.serviceTier,
     resolvedProvider: providerMeta?.resolvedProvider,
@@ -64,6 +72,11 @@ export function extractAISpanData(
     toolCount: toolDefs?.length,
     messageCount: countMessages(aiPrompt.messages),
     telemetryMetadata: telemetryMeta,
+    promptSlug: promptSlug || undefined,
+    promptVersion: promptVersion || undefined,
+    promptModel: promptModel || undefined,
+    promptLabels: promptLabels || undefined,
+    promptInput: promptInput || undefined,
     inputTokens,
     outputTokens,
     totalTokens,
diff --git a/apps/webapp/app/components/runs/v3/ai/types.ts b/apps/webapp/app/components/runs/v3/ai/types.ts
index be10ee9bcd1..bb0fd7e74b1 100644
--- a/apps/webapp/app/components/runs/v3/ai/types.ts
+++ b/apps/webapp/app/components/runs/v3/ai/types.ts
@@ -62,6 +62,7 @@ export type AISpanData = {
   model: string;
   provider: string;
   operationName: string;
+  responseId?: string;
 
   // Categorical tags
   finishReason?: string;
@@ -74,6 +75,13 @@ export type AISpanData = {
   /** User-defined telemetry metadata (from ai.telemetry.metadata) */
   telemetryMetadata?: Record<string, string>;
 
+  // Prompt metadata (from ai.telemetry.metadata.prompt)
+  promptSlug?: string;
+  promptVersion?: string;
+  promptModel?: string;
+  promptLabels?: string;
+  promptInput?: string;
+
   // Token counts
   inputTokens: number;
   outputTokens: number;
diff --git a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
index 144176c88fb..7158d2c2f04 100644
--- a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
+++ b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
@@ -217,7 +217,7 @@ const overviewDashboard: BuiltInDashboard = {
 const llmDashboard: BuiltInDashboard = {
   key: "llm",
   title: "AI Metrics",
-  filters: ["tasks", "models"],
+  filters: ["tasks", "models", "prompts"],
   layout: {
     version: "1",
     layout: [
@@ -248,7 +248,8 @@ const llmDashboard: BuiltInDashboard = {
       { i: "llm-title-attribution", x: 0, y: 77, w: 12, h: 2, minH: 2, maxH: 2 },
       { i: "llm-cost-task", x: 0, y: 79, w: 6, h: 13 },
       { i: "llm-cost-provider", x: 6, y: 79, w: 6, h: 13 },
-      { i: "llm-cost-user", x: 0, y: 92, w: 12, h: 13 },
+      { i: "llm-cost-prompt", x: 0, y: 92, w: 6, h: 13 },
+      { i: "llm-cost-user", x: 6, y: 92, w: 6, h: 13 },
       // Efficiency section
       { i: "llm-title-efficiency", x: 0, y: 105, w: 12, h: 2, minH: 2, maxH: 2 },
       { i: "llm-cost-operation", x: 0, y: 107, w: 6, h: 13 },
@@ -457,6 +458,12 @@ const llmDashboard: BuiltInDashboard = {
           aggregation: "sum",
         },
       },
+      "llm-cost-prompt": {
+        title: "Cost by prompt",
+        query:
+          "SELECT\r\n  prompt_slug,\r\n  SUM(total_cost) AS cost,\r\n  SUM(total_tokens) AS tokens,\r\n  count() AS calls\r\nFROM\r\n  llm_metrics\r\nWHERE prompt_slug != ''\r\nGROUP BY\r\n  prompt_slug\r\nORDER BY\r\n  cost DESC",
+        display: { type: "table", prettyFormatting: true, sorting: [] },
+      },
       "llm-cost-user": {
         title: "Cost by user",
         query:
diff --git a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
index 90b60891c58..1f71b8b69cf 100644
--- a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
@@ -58,7 +58,7 @@ export type CustomDashboard = {
   defaultPeriod: string;
 };
 
-export type BuiltInDashboardFilter = "tasks" | "queues" | "models";
+export type BuiltInDashboardFilter = "tasks" | "queues" | "models" | "prompts";
 
 export type BuiltInDashboard = {
   key: string;
diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
new file mode 100644
index 00000000000..afd25d0c09a
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -0,0 +1,332 @@
+import { ClickHouse } from "@internal/clickhouse";
+import { PrismaClientOrTransaction } from "~/db.server";
+import { BasePresenter } from "./basePresenter.server";
+import { z } from "zod";
+
+const GenerationRowSchema = z.object({
+  run_id: z.string(),
+  span_id: z.string(),
+  operation_id: z.string(),
+  task_identifier: z.string(),
+  response_model: z.string(),
+  input_tokens: z.coerce.number(),
+  output_tokens: z.coerce.number(),
+  total_cost: z.coerce.number(),
+  duration_ms: z.coerce.number(),
+  started_at: z.string(),
+});
+
+export type GenerationRow = {
+  run_id: string;
+  span_id: string;
+  operation_id: string;
+  task_identifier: string;
+  response_model: string;
+  input_tokens: number;
+  output_tokens: number;
+  total_cost: number;
+  duration_ms: number;
+  start_time: string;
+};
+
+export type GenerationsPagination = {
+  next?: string;
+};
+
+export class PromptPresenter extends BasePresenter {
+  private readonly clickhouse: ClickHouse;
+
+  constructor(clickhouse: ClickHouse, replica?: PrismaClientOrTransaction) {
+    super(undefined, replica);
+    this.clickhouse = clickhouse;
+  }
+
+  async listPrompts(projectId: string, environmentId: string) {
+    const prompts = await this._replica.prompt.findMany({
+      where: {
+        projectId,
+        runtimeEnvironmentId: environmentId,
+        archivedAt: null,
+      },
+      include: {
+        versions: {
+          where: {
+            labels: { hasSome: ["current", "override"] },
+          },
+          select: {
+            version: true,
+            labels: true,
+          },
+        },
+      },
+      orderBy: { updatedAt: "desc" },
+    });
+
+    return prompts.map((p) => {
+      const currentVersion = p.versions.find((v) => v.labels.includes("current"));
+      const hasOverride = p.versions.some((v) => v.labels.includes("override"));
+
+      return {
+        id: p.id,
+        friendlyId: p.friendlyId,
+        slug: p.slug,
+        description: p.description,
+        tags: p.tags,
+        defaultModel: p.defaultModel,
+        currentVersion: currentVersion ? { version: currentVersion.version } : null,
+        hasOverride,
+        updatedAt: p.updatedAt,
+      };
+    });
+  }
+
+  async getUsageSparklines(
+    environmentId: string,
+    promptSlugs: string[]
+  ): Promise<Record<string, number[]>> {
+    if (promptSlugs.length === 0) return {};
+
+    const queryFn = this.clickhouse.reader.query({
+      name: "promptUsageSparklines",
+      query: `SELECT
+          prompt_slug,
+          toStartOfHour(start_time) AS bucket,
+          count() AS cnt
+        FROM trigger_dev.llm_metrics_v1
+        WHERE environment_id = {environmentId: String}
+          AND prompt_slug IN {promptSlugs: Array(String)}
+          AND start_time >= now() - INTERVAL 24 HOUR
+        GROUP BY prompt_slug, bucket
+        ORDER BY prompt_slug, bucket`,
+      params: z.object({
+        environmentId: z.string(),
+        promptSlugs: z.array(z.string()),
+      }),
+      schema: z.object({
+        prompt_slug: z.string(),
+        bucket: z.string(),
+        cnt: z.coerce.number(),
+      }),
+    });
+
+    const [error, rows] = await queryFn({ environmentId, promptSlugs });
+    if (error) {
+      console.error("Prompt usage sparkline query failed:", error);
+      return {};
+    }
+
+    // Build a map of slug -> 24 hourly buckets
+    const now = new Date();
+    const startHour = new Date(now);
+    startHour.setMinutes(0, 0, 0);
+    startHour.setHours(startHour.getHours() - 23);
+
+    const bucketKeys: string[] = [];
+    for (let i = 0; i < 24; i++) {
+      const h = new Date(startHour);
+      h.setHours(h.getHours() + i);
+      // Format to match ClickHouse's toStartOfHour output: "YYYY-MM-DD HH:MM:SS"
+      bucketKeys.push(
+        h.toISOString().slice(0, 13).replace("T", " ") + ":00:00"
+      );
+    }
+
+    // Index rows by slug+bucket for fast lookup
+    const rowMap = new Map<string, number>();
+    for (const row of rows) {
+      rowMap.set(`${row.prompt_slug}|${row.bucket}`, row.cnt);
+    }
+
+    const result: Record<string, number[]> = {};
+    for (const slug of promptSlugs) {
+      result[slug] = bucketKeys.map((key) => rowMap.get(`${slug}|${key}`) ?? 0);
+    }
+
+    return result;
+  }
+
+  async resolveVersion(
+    promptId: string,
+    options?: { version?: number; label?: string }
+  ) {
+    if (options?.version) {
+      return this._replica.promptVersion.findUnique({
+        where: {
+          promptId_version: {
+            promptId,
+            version: options.version,
+          },
+        },
+      });
+    }
+
+    // Check for override first — dashboard edits take precedence
+    const override = await this._replica.promptVersion.findFirst({
+      where: {
+        promptId,
+        labels: { has: "override" },
+      },
+      orderBy: { version: "desc" },
+    });
+
+    if (override) {
+      return override;
+    }
+
+    const label = options?.label ?? "current";
+    return this._replica.promptVersion.findFirst({
+      where: {
+        promptId,
+        labels: { has: label },
+      },
+      orderBy: { version: "desc" },
+    });
+  }
+
+  async listVersions(promptId: string, limit: number = 50) {
+    return this._replica.promptVersion.findMany({
+      where: { promptId },
+      orderBy: { version: "desc" },
+      take: limit,
+      select: {
+        id: true,
+        version: true,
+        labels: true,
+        source: true,
+        model: true,
+        textContent: true,
+        commitMessage: true,
+        contentHash: true,
+        createdAt: true,
+      },
+    });
+  }
+
+  async listGenerations(options: {
+    environmentId: string;
+    promptSlug: string;
+    promptVersion: number;
+    startTime: Date;
+    endTime: Date;
+    cursor?: string;
+    pageSize?: number;
+  }): Promise<{ generations: GenerationRow[]; pagination: GenerationsPagination }> {
+    const pageSize = options.pageSize ?? 25;
+    const decodedCursor = options.cursor ? decodeCursor(options.cursor) : null;
+
+    const cursorClause = decodedCursor
+      ? `AND (start_time < parseDateTimeBestEffort({cursorStartTime: String})
+             OR (start_time = parseDateTimeBestEffort({cursorStartTime: String})
+                 AND span_id < {cursorSpanId: String}))`
+      : "";
+
+    const queryFn = this.clickhouse.reader.query({
+      name: decodedCursor ? "promptGenerationsListCursor" : "promptGenerationsList",
+      query: `SELECT
+          run_id, span_id, operation_id, task_identifier, response_model,
+          input_tokens, output_tokens, total_cost,
+          duration / 1000000 AS duration_ms,
+          formatDateTime(start_time, '%Y-%m-%d %H:%i:%S') AS started_at
+        FROM trigger_dev.llm_metrics_v1
+        WHERE environment_id = {environmentId: String}
+          AND prompt_slug = {promptSlug: String}
+          AND prompt_version = {promptVersion: UInt32}
+          AND start_time >= parseDateTimeBestEffort({startTime: String})
+          AND start_time <= parseDateTimeBestEffort({endTime: String})
+          ${cursorClause}
+        ORDER BY start_time DESC, span_id DESC
+        LIMIT {fetchLimit: UInt32}`,
+      params: z.object({
+        environmentId: z.string(),
+        promptSlug: z.string(),
+        promptVersion: z.number(),
+        startTime: z.string(),
+        endTime: z.string(),
+        fetchLimit: z.number(),
+        ...(decodedCursor
+          ? {
+              cursorStartTime: z.string(),
+              cursorSpanId: z.string(),
+            }
+          : {}),
+      }),
+      schema: GenerationRowSchema,
+    });
+
+    const queryParams: Record<string, unknown> = {
+      environmentId: options.environmentId,
+      promptSlug: options.promptSlug,
+      promptVersion: options.promptVersion,
+      startTime: options.startTime.toISOString(),
+      endTime: options.endTime.toISOString(),
+      fetchLimit: pageSize + 1,
+    };
+
+    if (decodedCursor) {
+      queryParams.cursorStartTime = decodedCursor.startTime;
+      queryParams.cursorSpanId = decodedCursor.spanId;
+    }
+
+    const [error, rows] = await queryFn(queryParams as any);
+
+    if (error) {
+      console.error("Prompt generations query failed:", error);
+      return { generations: [], pagination: {} };
+    }
+
+    const hasMore = rows.length > pageSize;
+    const pageRows = hasMore ? rows.slice(0, pageSize) : rows;
+
+    const generations: GenerationRow[] = pageRows.map((r) => ({
+      ...r,
+      start_time: r.started_at,
+    }));
+
+    const pagination: GenerationsPagination = {};
+    if (hasMore) {
+      const lastRow = pageRows[pageRows.length - 1];
+      pagination.next = encodeCursor(lastRow.started_at, lastRow.span_id);
+    }
+
+    return { generations, pagination };
+  }
+
+  async getDistinctPromptSlugs(
+    organizationId: string,
+    projectId: string,
+    environmentId: string
+  ): Promise<string[]> {
+    const queryFn = this.clickhouse.reader.query({
+      name: "getDistinctPromptSlugs",
+      query: `SELECT DISTINCT prompt_slug FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND prompt_slug != '' ORDER BY prompt_slug`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ prompt_slug: z.string() }),
+    });
+
+    const [error, rows] = await queryFn({ organizationId, projectId, environmentId });
+    if (error) {
+      return [];
+    }
+    return rows.map((r) => r.prompt_slug);
+  }
+}
+
+function encodeCursor(startTime: string, spanId: string): string {
+  return Buffer.from(JSON.stringify({ s: startTime, i: spanId })).toString("base64");
+}
+
+function decodeCursor(cursor: string): { startTime: string; spanId: string } | null {
+  try {
+    const parsed = JSON.parse(Buffer.from(cursor, "base64").toString("utf-8"));
+    if (typeof parsed.s === "string" && typeof parsed.i === "string") {
+      return { startTime: parsed.s, spanId: parsed.i };
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
diff --git a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
index 9ad94745616..19271d85a7f 100644
--- a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
@@ -26,6 +26,47 @@ import { IEventRepository, SpanDetail } from "~/v3/eventRepository/eventReposito
 import { safeJsonParse } from "~/utils/json";
 import { extractAISpanData } from "~/components/runs/v3/ai";
 
+export type PromptSpanData = {
+  slug: string;
+  version: number;
+  labels: string;
+  model?: string;
+  template?: string;
+  text?: string;
+  input?: string;
+  config?: string;
+};
+
+function extractPromptSpanData(
+  properties: Record<string, unknown>
+): PromptSpanData | undefined {
+  // Properties come as an unflattened nested object from ClickHouse,
+  // e.g. { prompt: { slug: "...", version: 3, ... } }
+  const prompt = properties.prompt;
+  if (!prompt || typeof prompt !== "object") {
+    return undefined;
+  }
+
+  const p = prompt as Record<string, unknown>;
+  const slug = p.slug;
+  const version = p.version;
+
+  if (typeof slug !== "string" || typeof version !== "number") {
+    return undefined;
+  }
+
+  return {
+    slug,
+    version,
+    labels: typeof p.labels === "string" ? p.labels : "",
+    model: typeof p.model === "string" ? p.model : undefined,
+    template: typeof p.template === "string" ? p.template : undefined,
+    text: typeof p.text === "string" ? p.text : undefined,
+    input: typeof p.input === "string" ? p.input : undefined,
+    config: typeof p.config === "string" ? p.config : undefined,
+  };
+}
+
 type Result = Awaited<ReturnType<SpanPresenter["call"]>>;
 export type Span = NonNullable<NonNullable<Result>["span"]>;
 export type SpanRun = NonNullable<NonNullable<Result>["run"]>;
@@ -672,11 +713,61 @@ export class SpanPresenter extends BasePresenter {
           },
         };
       }
+      case "prompt": {
+        const promptData = extractPromptSpanData(span.properties as Record<string, unknown>);
+
+        if (promptData) {
+          return {
+            ...data,
+            entity: { type: "prompt" as const, object: promptData },
+          };
+        }
+
+        return { ...data, entity: null };
+      }
       default:
         if (data.aiData) {
+          // Look up prompt version data if this generation has a linked prompt
+          let promptVersionData: PromptSpanData | undefined;
+          if (data.aiData.promptSlug && data.aiData.promptVersion) {
+            const prompt = await this._replica.prompt.findUnique({
+              where: {
+                projectId_runtimeEnvironmentId_slug: {
+                  projectId,
+                  runtimeEnvironmentId: environmentId,
+                  slug: data.aiData.promptSlug,
+                },
+              },
+            });
+            if (prompt) {
+              const version = await this._replica.promptVersion.findUnique({
+                where: {
+                  promptId_version: {
+                    promptId: prompt.id,
+                    version: Number(data.aiData.promptVersion),
+                  },
+                },
+              });
+              if (version) {
+                promptVersionData = {
+                  slug: data.aiData.promptSlug,
+                  version: version.version,
+                  labels: data.aiData.promptLabels ?? "",
+                  model: version.model ?? undefined,
+                  template: version.textContent ?? undefined,
+                  text: undefined, // Resolved text is per-invocation, not stored on the version
+                  input: data.aiData.promptInput,
+                };
+              }
+            }
+          }
           return {
             ...data,
-            entity: { type: "ai-generation" as const, object: data.aiData },
+            entity: {
+              type: "ai-generation" as const,
+              object: data.aiData,
+              promptVersionData,
+            },
           };
         }
         return { ...data, entity: null };
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
index 1374fd0f3de..e1897768003 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
@@ -7,6 +7,7 @@ import { z } from "zod";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
 import { ModelsFilter, type ModelOption } from "~/components/metrics/ModelsFilter";
+import { PromptsFilter } from "~/components/metrics/PromptsFilter";
 import { type WidgetData } from "~/components/metrics/QueryWidget";
 import { QueuesFilter } from "~/components/metrics/QueuesFilter";
 import { ScopeFilter } from "~/components/metrics/ScopeFilter";
@@ -28,6 +29,7 @@ import {
   type Widget,
   MetricDashboardPresenter,
 } from "~/presenters/v3/MetricDashboardPresenter.server";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
 import { requireUser } from "~/services/session.server";
 import { cn } from "~/utils/cn";
@@ -94,6 +96,16 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     }
   }
 
+  let possiblePrompts: string[] = [];
+  if (filters.includes("prompts")) {
+    const promptPresenter = new PromptPresenter(clickhouseClient);
+    possiblePrompts = await promptPresenter.getDistinctPromptSlugs(
+      project.organizationId,
+      project.id,
+      environment.id
+    );
+  }
+
   return typedjson({
     ...dashboard,
     filters,
@@ -101,6 +113,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       .map((task) => ({ slug: task.slug, triggerSource: task.triggerSource }))
       .sort((a, b) => a.slug.localeCompare(b.slug)),
     possibleModels,
+    possiblePrompts,
   });
 };
 
@@ -113,6 +126,7 @@ export default function Page() {
     filters,
     possibleTasks,
     possibleModels,
+    possiblePrompts,
   } = useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
@@ -142,6 +156,7 @@ export default function Page() {
             filters={filters}
             possibleTasks={possibleTasks}
             possibleModels={possibleModels}
+            possiblePrompts={possiblePrompts}
           />
         </div>
       </PageBody>
@@ -157,6 +172,7 @@ export function MetricDashboard({
   filters: filterConfig,
   possibleTasks,
   possibleModels,
+  possiblePrompts,
   onLayoutChange,
   onEditWidget,
   onRenameWidget,
@@ -175,6 +191,8 @@ export function MetricDashboard({
   possibleTasks?: { slug: string; triggerSource: TaskTriggerSource }[];
   /** Possible models for filtering */
   possibleModels?: ModelOption[];
+  /** Possible prompt slugs for filtering */
+  possiblePrompts?: string[];
   onLayoutChange?: (layout: LayoutItem[]) => void;
   onEditWidget?: (widgetId: string, widget: WidgetData) => void;
   onRenameWidget?: (widgetId: string, newTitle: string) => void;
@@ -202,6 +220,7 @@ export function MetricDashboard({
   const tasks = values("tasks").filter((v) => v !== "");
   const queues = values("queues").filter((v) => v !== "");
   const models = values("models").filter((v) => v !== "");
+  const prompts = values("prompts").filter((v) => v !== "");
 
   const activeFilters = filterConfig ?? ["tasks", "queues"];
 
@@ -237,6 +256,9 @@ export function MetricDashboard({
         {activeFilters.includes("models") && (
           <ModelsFilter possibleModels={possibleModels ?? []} />
         )}
+        {activeFilters.includes("prompts") && (
+          <PromptsFilter possiblePrompts={possiblePrompts ?? []} />
+        )}
         <TimeFilter
           defaultPeriod={defaultPeriod}
           labelName="Period"
@@ -292,6 +314,7 @@ export function MetricDashboard({
                     taskIdentifiers={tasks.length > 0 ? tasks : undefined}
                     queues={queues.length > 0 ? queues : undefined}
                     responseModels={models.length > 0 ? models : undefined}
+                    promptSlugs={prompts.length > 0 ? prompts : undefined}
                     config={widget.display}
                     organizationId={organization.id}
                     projectId={project.id}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
new file mode 100644
index 00000000000..3b17678b2be
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -0,0 +1,1870 @@
+import * as Ariakit from "@ariakit/react";
+import { ArrowPathIcon, SparklesIcon } from "@heroicons/react/20/solid";
+import { type MetaFunction, useFetcher } from "@remix-run/react";
+import {
+  type ActionFunctionArgs,
+  json,
+  type LoaderFunctionArgs,
+  redirect,
+} from "@remix-run/server-runtime";
+import { DialogClose } from "@radix-ui/react-dialog";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { TextEditor } from "~/components/code/TextEditor";
+import { PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Badge } from "~/components/primitives/Badge";
+import { DateTime } from "~/components/primitives/DateTime";
+import { Button } from "~/components/primitives/Buttons";
+import { Header2, Header3 } from "~/components/primitives/Headers";
+import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
+import { Hint } from "~/components/primitives/Hint";
+import { Input } from "~/components/primitives/Input";
+import { InputGroup } from "~/components/primitives/InputGroup";
+import { Label } from "~/components/primitives/Label";
+import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { Spinner } from "~/components/primitives/Spinner";
+import * as Property from "~/components/primitives/PropertyTable";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  type ResizableSnapshot,
+} from "~/components/primitives/Resizable";
+import { TabButton, TabContainer } from "~/components/primitives/Tabs";
+import { CopyButton } from "~/components/primitives/CopyButton";
+import { CopyableText } from "~/components/primitives/CopyableText";
+import {
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { TextArea } from "~/components/primitives/TextArea";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import { TimeFilter } from "~/components/runs/v3/SharedFilters";
+import { SpanView } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { prisma } from "~/db.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { useInterval } from "~/hooks/useInterval";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { getResizableSnapshot } from "~/services/resizablePanel.server";
+import { requireUserId } from "~/services/session.server";
+import { PromptService } from "~/v3/services/promptService.server";
+
+import { MetricWidget } from "~/routes/resources.metric";
+import { InfoPanel } from "~/components/primitives/InfoPanel";
+import { InlineCode } from "~/components/code/InlineCode";
+import { TextLink } from "~/components/primitives/TextLink";
+import { EnvironmentParamSchema, v3RunSpanPath } from "~/utils/pathBuilder";
+import { z } from "zod";
+
+const ParamSchema = EnvironmentParamSchema.extend({
+  promptSlug: z.string(),
+});
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  return [{ title: `${(data as any)?.prompt.slug ?? "Prompt"} | Trigger.dev` }];
+};
+
+// ─── Action ──────────────────────────────────────────────
+
+const ActionSchema = z.discriminatedUnion("intent", [
+  z.object({
+    intent: z.literal("promote"),
+    versionId: z.string(),
+  }),
+  z.object({
+    intent: z.literal("saveVersion"),
+    textContent: z.string().optional(),
+    model: z.string().optional(),
+    commitMessage: z.string().optional(),
+  }),
+  z.object({
+    intent: z.literal("updateOverride"),
+    textContent: z.string().optional(),
+    model: z.string().optional(),
+    commitMessage: z.string().optional(),
+  }),
+  z.object({
+    intent: z.literal("removeOverride"),
+  }),
+  z.object({
+    intent: z.literal("reactivateOverride"),
+    versionId: z.string(),
+  }),
+]);
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam, promptSlug } = ParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) return json({ error: "Project not found" }, { status: 404 });
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) return json({ error: "Environment not found" }, { status: 404 });
+
+  const formData = Object.fromEntries(await request.formData());
+  const parsed = ActionSchema.safeParse(formData);
+  if (!parsed.success) return json({ error: "Invalid action" }, { status: 400 });
+
+  const prompt = await prisma.prompt.findUnique({
+    where: {
+      projectId_runtimeEnvironmentId_slug: {
+        projectId: project.id,
+        runtimeEnvironmentId: environment.id,
+        slug: promptSlug,
+      },
+    },
+  });
+
+  if (!prompt) return json({ error: "Prompt not found" }, { status: 404 });
+
+  const data = parsed.data;
+  const service = new PromptService();
+
+  if (data.intent === "promote") {
+    await service.promoteVersion(prompt.id, data.versionId);
+    return json({ ok: true });
+  }
+
+  const url = new URL(request.url);
+
+  if (data.intent === "saveVersion") {
+    const result = await service.createOverride(prompt.id, {
+      textContent: data.textContent ?? "",
+      model: data.model,
+      commitMessage: data.commitMessage,
+      source: "dashboard",
+      createdBy: userId,
+    });
+    url.searchParams.set("version", String(result.version));
+    return redirect(url.pathname + url.search);
+  }
+
+  if (data.intent === "updateOverride") {
+    await service.updateOverride(prompt.id, {
+      textContent: data.textContent,
+      model: data.model,
+      commitMessage: data.commitMessage,
+    });
+    return json({ ok: true });
+  }
+
+  if (data.intent === "removeOverride") {
+    await service.removeOverride(prompt.id);
+    // Navigate back to current version
+    const currentVersion = await prisma.promptVersion.findFirst({
+      where: { promptId: prompt.id, labels: { has: "current" } },
+      select: { version: true },
+    });
+    if (currentVersion) {
+      url.searchParams.set("version", String(currentVersion.version));
+    } else {
+      url.searchParams.delete("version");
+    }
+    return redirect(url.pathname + url.search);
+  }
+
+  if (data.intent === "reactivateOverride") {
+    await service.reactivateOverride(prompt.id, data.versionId);
+    return json({ ok: true });
+  }
+
+  return json({ error: "Unknown intent" }, { status: 400 });
+}
+
+// ─── Loader ──────────────────────────────────────────────
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam, promptSlug } = ParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) throw new Response("Project not found", { status: 404 });
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) throw new Response("Environment not found", { status: 404 });
+
+  const prompt = await prisma.prompt.findUnique({
+    where: {
+      projectId_runtimeEnvironmentId_slug: {
+        projectId: project.id,
+        runtimeEnvironmentId: environment.id,
+        slug: promptSlug,
+      },
+    },
+    include: {
+      versions: { orderBy: { version: "desc" }, take: 50 },
+    },
+  });
+
+  if (!prompt) throw new Response("Prompt not found", { status: 404 });
+
+  const currentVersion = prompt.versions.find((v) => v.labels.includes("current"));
+  const overrideVersion = prompt.versions.find((v) => v.labels.includes("override"));
+
+  // Query ClickHouse for recent generations (for the Generations tab span list)
+  const url = new URL(request.url);
+  const period = url.searchParams.get("period") ?? "7d";
+  const periodMs = parsePeriodToMs(period);
+  const fromTime = url.searchParams.get("from");
+  const toTime = url.searchParams.get("to");
+
+  // Determine which version to scope generations to
+  const versionParam = url.searchParams.get("version");
+  const selectedVersionNumber = versionParam ? Number(versionParam) : currentVersion?.version ?? 1;
+
+  const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
+  const endTime = toTime ? new Date(toTime) : new Date();
+
+  const presenter = new PromptPresenter(clickhouseClient);
+  let generations: Awaited<ReturnType<typeof presenter.listGenerations>>["generations"] = [];
+  let generationsPagination: { next?: string } = {};
+  try {
+    const result = await presenter.listGenerations({
+      environmentId: environment.id,
+      promptSlug: prompt.slug,
+      promptVersion: selectedVersionNumber,
+      startTime,
+      endTime,
+    });
+    generations = result.generations;
+    generationsPagination = result.pagination;
+  } catch (e) {
+    console.error("Prompt generations query exception:", e);
+  }
+
+  const [resizableOuter, resizableVertical, resizableGenerations] = await Promise.all([
+    getResizableSnapshot(request, "prompt-detail"),
+    getResizableSnapshot(request, "prompt-vertical"),
+    getResizableSnapshot(request, "prompt-generations"),
+  ]);
+
+  return typedjson({
+    resizable: { outer: resizableOuter, vertical: resizableVertical, generations: resizableGenerations },
+    prompt: {
+      id: prompt.id,
+      friendlyId: prompt.friendlyId,
+      slug: prompt.slug,
+      description: prompt.description,
+      tags: prompt.tags,
+      defaultModel: prompt.defaultModel,
+      defaultConfig: prompt.defaultConfig,
+      variableSchema: prompt.variableSchema,
+      filePath: prompt.filePath,
+      exportName: prompt.exportName,
+    },
+    currentVersion: currentVersion
+      ? {
+          id: currentVersion.id,
+          version: currentVersion.version,
+          textContent: currentVersion.textContent,
+          model: currentVersion.model,
+          source: currentVersion.source,
+          labels: currentVersion.labels,
+        }
+      : null,
+    versions: prompt.versions.map((v) => ({
+      id: v.id,
+      version: v.version,
+      labels: v.labels,
+      source: v.source,
+      commitMessage: v.commitMessage,
+      textContent: v.textContent,
+      model: v.model,
+      createdAt: v.createdAt,
+    })),
+    overrideVersion: overrideVersion
+      ? {
+          id: overrideVersion.id,
+          version: overrideVersion.version,
+        }
+      : null,
+    generations,
+    generationsPagination,
+    organizationId: project.organizationId,
+    projectId: project.id,
+    environmentId: environment.id,
+  });
+};
+
+// ─── Helpers ─────────────────────────────────────────────
+
+function parsePeriodToMs(period: string): number {
+  const match = period.match(/^(\d+)([hdwm])$/);
+  if (!match) return 7 * 24 * 60 * 60 * 1000; // default 7d
+  const [, numStr, unit] = match;
+  const num = parseInt(numStr, 10);
+  switch (unit) {
+    case "h":
+      return num * 60 * 60 * 1000;
+    case "d":
+      return num * 24 * 60 * 60 * 1000;
+    case "w":
+      return num * 7 * 24 * 60 * 60 * 1000;
+    case "m":
+      return num * 30 * 24 * 60 * 60 * 1000;
+    default:
+      return 7 * 24 * 60 * 60 * 1000;
+  }
+}
+
+type VersionData = {
+  id: string;
+  version: number;
+  labels: string[];
+  source: string;
+  commitMessage: string | null;
+  textContent: string | null;
+  model: string | null;
+  createdAt: Date;
+};
+
+type VariableField = {
+  name: string;
+  type: string;
+  required: boolean;
+  description?: string;
+  placeholder?: string;
+  enumValues?: string[];
+  isLongText: boolean;
+};
+
+function extractVariableFields(schema: unknown): VariableField[] {
+  const jsonSchema = schema as {
+    properties?: Record<string, { type?: string; description?: string; enum?: string[] }>;
+    required?: string[];
+  } | null;
+  if (!jsonSchema?.properties) return [];
+  const requiredSet = new Set(jsonSchema.required ?? []);
+  return Object.entries(jsonSchema.properties).map(([name, prop]) => ({
+    name,
+    type: prop.type ?? "string",
+    required: requiredSet.has(name),
+    description: prop.description,
+    placeholder: prop.description ?? name,
+    enumValues: prop.enum,
+    isLongText:
+      prop.type === "string" &&
+      !prop.enum &&
+      (name.toLowerCase().includes("text") ||
+        name.toLowerCase().includes("content") ||
+        name.toLowerCase().includes("message") ||
+        name.toLowerCase().includes("body")),
+  }));
+}
+
+function compileTemplatePreview(template: string, variables: Record<string, string>): string {
+  let result = template.replace(/\{\{#(\w+)\}\}([\s\S]*?)\{\{\/\1\}\}/g, (_match, key, content) => {
+    const value = variables[key];
+    return value
+      ? content.replace(/\{\{(\w+)\}\}/g, (_m: string, k: string) => variables[k] ?? "")
+      : "";
+  });
+  result = result.replace(/\{\{\s*(\w+)\s*\}\}/g, (_match, key) => {
+    return variables[key] ?? `{{${key}}}`;
+  });
+  return result;
+}
+
+function getVersionContent(version: { textContent?: string | null }): string {
+  return version.textContent ?? "";
+}
+
+// ─── Component ───────────────────────────────────────────
+
+export default function PromptDetailPage() {
+  const {
+    prompt,
+    currentVersion,
+    versions,
+    overrideVersion,
+    generations,
+    generationsPagination,
+    organizationId,
+    projectId,
+    environmentId,
+    resizable,
+  } = useTypedLoaderData<typeof loader>();
+  const fetcher = useFetcher();
+  const { value: searchValue, replace: replaceSearch } = useSearchParams();
+
+  const tab = searchValue("tab") ?? "details";
+  const contentTab = searchValue("contentTab") ?? "generations";
+  const period = searchValue("period") ?? "7d";
+  const from = searchValue("from") ?? null;
+  const to = searchValue("to") ?? null;
+
+  // Selected span for the generations inspector — auto-select first generation
+  const [selectedSpan, setSelectedSpan] = useState<{ runId: string; spanId: string } | null>(
+    generations[0] ? { runId: generations[0].run_id, spanId: generations[0].span_id } : null
+  );
+
+  // Selected version from URL or default to current
+  const versionParam = searchValue("version");
+  const selectedVersion = versionParam
+    ? versions.find((v) => v.version === Number(versionParam)) ?? versions[0]
+    : currentVersion
+    ? versions.find((v) => v.id === currentVersion.id) ?? versions[0]
+    : versions[0];
+
+  const content = selectedVersion ? getVersionContent(selectedVersion) : "";
+  const isCurrent = selectedVersion?.labels.includes("current") ?? false;
+
+  const [overrideDialogOpen, setOverrideDialogOpen] = useState(false);
+
+  const handlePromote = (versionId: string) => {
+    fetcher.submit({ intent: "promote", versionId }, { method: "POST" });
+  };
+
+  const switchVersion = (versionNumber: number) => {
+    const v = versions.find((v) => v.version === versionNumber);
+    if (v) {
+      replaceSearch({
+        version: v.labels.includes("current") ? undefined : String(v.version),
+        tab,
+      });
+    }
+  };
+
+  return (
+    <PageContainer>
+      <NavBar>
+        <PageTitle
+          title={
+            <div className="flex items-center gap-2">
+              <span>{prompt.slug}</span>
+              <span className="font-mono text-xs text-text-dimmed">
+                <CopyableText value={prompt.friendlyId} />
+              </span>
+            </div>
+          }
+          backButton={{ to: "..", text: "Prompts" }}
+        />
+        <PageAccessories>
+          <div className="flex items-center gap-2">
+            {selectedVersion && (
+              <span className="text-xs text-text-dimmed">
+                v{selectedVersion.version}
+                {isCurrent && <span className="ml-1 text-green-500">current</span>}
+              </span>
+            )}
+            {overrideVersion && (
+              <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
+                override active (v{overrideVersion.version})
+              </Badge>
+            )}
+            {selectedVersion && !isCurrent && selectedVersion.source === "code" && (
+              <Button
+                variant="tertiary/small"
+                onClick={() => handlePromote(selectedVersion.id)}
+                disabled={fetcher.state !== "idle"}
+              >
+                Promote to current
+              </Button>
+            )}
+            {selectedVersion &&
+              selectedVersion.source !== "code" &&
+              !selectedVersion.labels.includes("override") && (
+                <Button
+                  variant="tertiary/small"
+                  onClick={() =>
+                    fetcher.submit(
+                      { intent: "reactivateOverride", versionId: selectedVersion.id },
+                      { method: "POST" }
+                    )
+                  }
+                  disabled={fetcher.state !== "idle"}
+                >
+                  Reactivate as override
+                </Button>
+              )}
+            <Button variant="tertiary/small" onClick={() => setOverrideDialogOpen(true)}>
+              {overrideVersion ? "Edit Override" : "Create Override"}
+            </Button>
+          </div>
+        </PageAccessories>
+      </NavBar>
+      <PageBody scrollable={false}>
+        <ResizablePanelGroup
+          autosaveId="prompt-detail"
+          snapshot={resizable?.outer}
+          className="h-full max-h-full"
+        >
+          {/* Main content */}
+          <ResizablePanel id="prompt-main" min="400px">
+            <ResizablePanelGroup
+              autosaveId="prompt-vertical"
+              snapshot={resizable?.vertical}
+              orientation="vertical"
+              className="h-full max-h-full"
+            >
+              {/* Template panel */}
+              <ResizablePanel id="prompt-template" default="250px" min="80px">
+                <div className="flex h-full flex-col overflow-hidden p-3 pb-0">
+                  {/* Sticky header */}
+                  <div className="mb-2 flex-shrink-0 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Header3>Template</Header3>
+                      {content && <CopyButton value={content} variant="icon" size="extra-small" />}
+                    </div>
+                    {overrideVersion && (
+                      <div className="flex items-center justify-between rounded border border-amber-500/30 bg-amber-500/5 px-3 py-2">
+                        <span className="text-xs text-amber-300">
+                          Dashboard override active (v{overrideVersion.version}). This version is
+                          served instead of the deployed version.
+                        </span>
+                        <Button
+                          variant="tertiary/small"
+                          onClick={() =>
+                            fetcher.submit({ intent: "removeOverride" }, { method: "POST" })
+                          }
+                          disabled={fetcher.state !== "idle"}
+                        >
+                          Remove override
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                  {/* Scrollable content */}
+                  {content ? (
+                    <div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                      <CodeBlock
+                        code={content}
+                        language="markdown"
+                        showLineNumbers={false}
+                        showCopyButton={false}
+                        showTextWrapping={false}
+                        showOpenInModal={false}
+                      />
+                    </div>
+                  ) : (
+                    <div className="rounded border border-grid-dimmed p-3">
+                      <Paragraph variant="small" className="text-text-dimmed">
+                        No content
+                      </Paragraph>
+                    </div>
+                  )}
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle id="prompt-vertical-handle" />
+
+              {/* Tabs panel */}
+              <ResizablePanel id="prompt-tabs" min="100px">
+                <div className="grid h-full max-h-full grid-rows-[2rem_1fr] overflow-hidden">
+                  {/* Tab bar */}
+                  <div className="flex items-center justify-between border-b border-grid-dimmed px-3">
+                    <TabContainer>
+                      <TabButton
+                        isActive={contentTab === "generations"}
+                        layoutId="prompt-content"
+                        onClick={() =>
+                          replaceSearch({
+                            contentTab: "generations",
+                            tab,
+                            version: searchValue("version"),
+                            period: searchValue("period"),
+                            from: searchValue("from"),
+                            to: searchValue("to"),
+                          })
+                        }
+                      >
+                        Generations
+                      </TabButton>
+                      <TabButton
+                        isActive={contentTab === "metrics"}
+                        layoutId="prompt-content"
+                        onClick={() =>
+                          replaceSearch({
+                            contentTab: "metrics",
+                            tab,
+                            version: searchValue("version"),
+                            period: searchValue("period"),
+                            from: searchValue("from"),
+                            to: searchValue("to"),
+                          })
+                        }
+                      >
+                        Metrics
+                      </TabButton>
+                    </TabContainer>
+                    <TimeFilter
+                      defaultPeriod="7d"
+                      labelName="Period"
+                      hideLabel
+                      valueClassName="text-text-bright"
+                    />
+                  </div>
+
+                  {/* Tab content */}
+                  <div className="min-h-0 overflow-hidden">
+                    {contentTab === "generations" && (
+                      <GenerationsTab
+                        promptSlug={prompt.slug}
+                        promptVersion={selectedVersion?.version ?? 1}
+                        initialGenerations={generations}
+                        initialPagination={generationsPagination}
+                        selectedSpan={selectedSpan}
+                        onSelectSpan={setSelectedSpan}
+                        generationsSnapshot={resizable?.generations}
+                      />
+                    )}
+
+                    {contentTab === "metrics" && (
+                      <div className="h-full overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                        <MetricsTab
+                          prompt={prompt}
+                          versions={versions}
+                          organizationId={organizationId}
+                          projectId={projectId}
+                          environmentId={environmentId}
+                          period={period}
+                          from={from}
+                          to={to}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+
+          <ResizableHandle id="prompt-sidebar-handle" />
+
+          {/* Sidebar */}
+          <ResizablePanel id="prompt-sidebar" default="380px" min="280px" max="500px" isStaticAtRest>
+            <div className="grid h-full max-h-full grid-rows-[2rem_1fr] overflow-hidden bg-background-bright">
+              {/* Tabs */}
+              <div className="overflow-x-auto px-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                <TabContainer>
+                  <TabButton
+                    isActive={tab === "details"}
+                    layoutId="prompt-sidebar"
+                    onClick={() => replaceSearch({ tab: "details", version: versionParam })}
+                    shortcut={{ key: "d" }}
+                  >
+                    Details
+                  </TabButton>
+                  <TabButton
+                    isActive={tab === "preview"}
+                    layoutId="prompt-sidebar"
+                    onClick={() => replaceSearch({ tab: "preview", version: versionParam })}
+                    shortcut={{ key: "p" }}
+                  >
+                    Preview
+                  </TabButton>
+                  <TabButton
+                    isActive={tab === "versions"}
+                    layoutId="prompt-sidebar"
+                    onClick={() => replaceSearch({ tab: "versions", version: versionParam })}
+                    shortcut={{ key: "v" }}
+                  >
+                    Versions
+                  </TabButton>
+                </TabContainer>
+              </div>
+
+              {/* Tab content */}
+              <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+                {tab === "details" && <DetailsTab prompt={prompt} />}
+                {tab === "preview" && <PreviewTab prompt={prompt} content={content} />}
+                {tab === "versions" && (
+                  <VersionsTab
+                    versions={versions}
+                    selectedVersion={selectedVersion}
+                    onSelectVersion={switchVersion}
+                  />
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </PageBody>
+      <OverrideDialog
+        open={overrideDialogOpen}
+        onOpenChange={setOverrideDialogOpen}
+        prompt={prompt}
+        content={content}
+        isEditingOverride={!!overrideVersion}
+        onSave={(textContent, commitMessage) => {
+          const intent = overrideVersion ? "updateOverride" : "saveVersion";
+          fetcher.submit({ intent, textContent, commitMessage }, { method: "POST" });
+          setOverrideDialogOpen(false);
+        }}
+      />
+    </PageContainer>
+  );
+}
+
+// ─── Override Dialog ─────────────────────────────────────
+
+function OverrideDialog({
+  open,
+  onOpenChange,
+  prompt,
+  content,
+  isEditingOverride,
+  onSave,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  prompt: {
+    slug: string;
+    defaultModel: string | null;
+    defaultConfig: unknown;
+    variableSchema: unknown;
+  };
+  content: string;
+  isEditingOverride: boolean;
+  onSave: (textContent: string, commitMessage: string) => void;
+}) {
+  const [editedContent, setEditedContent] = useState(content);
+  const [commitMessage, setCommitMessage] = useState("");
+  const [model, setModel] = useState(prompt.defaultModel ?? "");
+
+  // Reset when dialog opens
+  useEffect(() => {
+    if (open) {
+      setEditedContent(content);
+      setCommitMessage("");
+      setModel(prompt.defaultModel ?? "");
+    }
+  }, [open, content, prompt.defaultModel]);
+
+  const variableFields = prompt.variableSchema ? extractVariableFields(prompt.variableSchema) : [];
+
+  // Extract variables used in the template
+  const templateVars = new Set<string>();
+  editedContent.replace(/\{\{\s*(\w+)\s*\}\}/g, (_m, key) => {
+    templateVars.add(key);
+    return "";
+  });
+  editedContent.replace(/\{\{#(\w+)\}\}/g, (_m, key) => {
+    templateVars.add(key);
+    return "";
+  });
+
+  // Check for schema mismatches
+  const schemaVarNames = new Set(variableFields.map((f) => f.name));
+  const undefinedVars = [...templateVars].filter((v) => !schemaVarNames.has(v));
+  const unusedVars = variableFields.filter((f) => f.required && !templateVars.has(f.name));
+
+  const hasChanges = editedContent !== content;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex h-[85vh] max-h-[85vh] flex-col !gap-0 overflow-hidden px-0 pt-0 md:max-w-4xl lg:max-w-6xl">
+        <DialogHeader className="px-4 py-2.5">
+          {isEditingOverride ? "Edit override" : "Create override"}
+        </DialogHeader>
+
+        <ResizablePanelGroup
+          orientation="horizontal"
+          className="-mx-3 w-auto flex-1 border-b border-t border-grid-dimmed"
+        >
+          {/* Editor */}
+          <ResizablePanel id="override-editor" min="300px">
+            <TextEditor
+              className="h-full"
+              autoFocus
+              defaultValue={editedContent}
+              onChange={setEditedContent}
+              showCopyButton
+            />
+          </ResizablePanel>
+
+          <ResizableHandle id="override-handle" />
+
+          {/* Right panel: properties */}
+          <ResizablePanel id="override-sidebar" min="220px" default="280px" max="360px">
+            <div className="h-full overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Header3>Override settings</Header3>
+                  <InputGroup>
+                    <Label variant="small">Commit message</Label>
+                    <Input
+                      variant="small"
+                      placeholder="What changed? (optional)"
+                      value={commitMessage}
+                      onChange={(e) => setCommitMessage(e.target.value)}
+                    />
+                  </InputGroup>
+                  <InputGroup>
+                    <Label variant="small">Model</Label>
+                    <Input
+                      variant="small"
+                      placeholder={prompt.defaultModel ?? "No default"}
+                      value={model}
+                      onChange={(e) => setModel(e.target.value)}
+                    />
+                    <Hint>Override the default model for this version</Hint>
+                  </InputGroup>
+                </div>
+
+                {/* Variable schema (read-only) */}
+                {variableFields.length > 0 && (
+                  <div className="space-y-1.5 border-t border-grid-dimmed pt-3">
+                    <Label variant="small">Variables (from code)</Label>
+                    <div className="space-y-1">
+                      {variableFields.map((f) => (
+                        <div key={f.name} className="flex items-center gap-1.5 text-xs">
+                          <code className="rounded bg-charcoal-750 px-1 py-0.5 text-text-bright">
+                            {f.name}
+                          </code>
+                          <span className="text-text-dimmed">{f.type}</span>
+                          {f.required && (
+                            <Badge
+                              variant="extra-small"
+                              className="border-amber-500/30 text-amber-400"
+                            >
+                              required
+                            </Badge>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Validation warnings */}
+                {(undefinedVars.length > 0 || unusedVars.length > 0) && (
+                  <div className="space-y-2 border-t border-grid-dimmed pt-3">
+                    {undefinedVars.length > 0 && (
+                      <div className="rounded border border-amber-500/30 bg-amber-500/5 px-2.5 py-2 text-xs text-amber-300">
+                        <span className="font-medium">Undefined variables:</span>{" "}
+                        {undefinedVars.map((v) => (
+                          <code
+                            key={v}
+                            className="mx-0.5 rounded bg-amber-500/10 px-1"
+                          >{`{{${v}}}`}</code>
+                        ))}
+                      </div>
+                    )}
+                    {unusedVars.length > 0 && (
+                      <div className="rounded border border-amber-500/30 bg-amber-500/5 px-2.5 py-2 text-xs text-amber-300">
+                        <span className="font-medium">Required but missing:</span>{" "}
+                        {unusedVars.map((v) => (
+                          <code key={v.name} className="mx-0.5 rounded bg-amber-500/10 px-1">
+                            {v.name}
+                          </code>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between gap-2 px-4 pt-3">
+          <DialogClose asChild>
+            <Button variant="tertiary/medium">Cancel</Button>
+          </DialogClose>
+          <Button
+            variant="primary/medium"
+            disabled={!hasChanges}
+            onClick={() => onSave(editedContent, commitMessage)}
+          >
+            {isEditingOverride ? "Save override" : "Create override"}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ─── Details Tab ─────────────────────────────────────────
+
+function DetailsTab({
+  prompt,
+}: {
+  prompt: ReturnType<typeof useTypedLoaderData<typeof loader>>["prompt"];
+}) {
+  return (
+    <div className="space-y-4">
+      <Property.Table>
+        <Property.Item>
+          <Property.Label>Slug</Property.Label>
+          <Property.Value>
+            <code className="text-xs">{prompt.slug}</code>
+          </Property.Value>
+        </Property.Item>
+        {prompt.description && (
+          <Property.Item>
+            <Property.Label>Description</Property.Label>
+            <Property.Value>{prompt.description}</Property.Value>
+          </Property.Item>
+        )}
+        {prompt.defaultModel && (
+          <Property.Item>
+            <Property.Label>Default model</Property.Label>
+            <Property.Value>{prompt.defaultModel}</Property.Value>
+          </Property.Item>
+        )}
+        {prompt.defaultConfig && (
+          <Property.Item>
+            <Property.Label>Config</Property.Label>
+            <Property.Value>
+              <CodeBlock
+                code={JSON.stringify(prompt.defaultConfig, null, 2)}
+                maxLines={10}
+                showLineNumbers={false}
+              />
+            </Property.Value>
+          </Property.Item>
+        )}
+        {prompt.filePath && (
+          <Property.Item>
+            <Property.Label>Source</Property.Label>
+            <Property.Value>
+              <code className="text-xs">
+                {prompt.filePath}
+                {prompt.exportName ? ` (${prompt.exportName})` : ""}
+              </code>
+            </Property.Value>
+          </Property.Item>
+        )}
+        {prompt.tags.length > 0 && (
+          <Property.Item>
+            <Property.Label>Tags</Property.Label>
+            <Property.Value>
+              <div className="flex flex-wrap gap-1">
+                {prompt.tags.map((tag) => (
+                  <Badge key={tag} variant="extra-small">
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </Property.Value>
+          </Property.Item>
+        )}
+      </Property.Table>
+
+      {prompt.variableSchema && (
+        <div className="space-y-2">
+          <Header3>Variable schema</Header3>
+          <CodeBlock
+            code={JSON.stringify(prompt.variableSchema, null, 2)}
+            maxLines={20}
+            showLineNumbers={false}
+            showCopyButton
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Preview Tab ─────────────────────────────────────────
+
+function PreviewTab({
+  prompt,
+  content,
+}: {
+  prompt: ReturnType<typeof useTypedLoaderData<typeof loader>>["prompt"];
+  content: string;
+}) {
+  const variableFields = prompt.variableSchema ? extractVariableFields(prompt.variableSchema) : [];
+
+  const [testVariables, setTestVariables] = useState<Record<string, string>>(() =>
+    Object.fromEntries(variableFields.map((f) => [f.name, ""]))
+  );
+  const hasTestValues = Object.values(testVariables).some((v) => v.length > 0);
+  const previewText = hasTestValues ? compileTemplatePreview(content, testVariables) : null;
+
+  return (
+    <div className="space-y-4">
+      {variableFields.length > 0 ? (
+        <>
+          <div className="space-y-3">
+            <Header3>Variables</Header3>
+            {variableFields.map((field) => (
+              <InputGroup key={field.name}>
+                <Label variant="small" required={field.required}>
+                  {field.name}
+                </Label>
+                {field.enumValues ? (
+                  <select
+                    className="h-6 w-full rounded border border-charcoal-650 bg-background-bright px-1 text-xs text-text-bright focus:border-indigo-500 focus:outline-none"
+                    value={testVariables[field.name] ?? ""}
+                    onChange={(e) =>
+                      setTestVariables((prev) => ({
+                        ...prev,
+                        [field.name]: e.target.value,
+                      }))
+                    }
+                  >
+                    <option value="">Select...</option>
+                    {field.enumValues.map((v) => (
+                      <option key={v} value={v}>
+                        {v}
+                      </option>
+                    ))}
+                  </select>
+                ) : field.isLongText ? (
+                  <TextArea
+                    rows={3}
+                    className="text-xs"
+                    placeholder={field.placeholder}
+                    value={testVariables[field.name] ?? ""}
+                    onChange={(e) =>
+                      setTestVariables((prev) => ({
+                        ...prev,
+                        [field.name]: e.target.value,
+                      }))
+                    }
+                  />
+                ) : (
+                  <Input
+                    variant="small"
+                    placeholder={field.placeholder}
+                    value={testVariables[field.name] ?? ""}
+                    onChange={(e) =>
+                      setTestVariables((prev) => ({
+                        ...prev,
+                        [field.name]: e.target.value,
+                      }))
+                    }
+                  />
+                )}
+                {field.description && <Hint>{field.description}</Hint>}
+              </InputGroup>
+            ))}
+          </div>
+
+          <div className="space-y-1">
+            <Header3>Resolved output</Header3>
+            {previewText ? (
+              <div className="overflow-auto rounded border border-indigo-500/30 bg-charcoal-900 p-3">
+                <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed text-text-bright">
+                  {previewText}
+                </pre>
+              </div>
+            ) : (
+              <div className="rounded border border-grid-dimmed bg-charcoal-900/50 p-3">
+                <Paragraph variant="extra-small" className="text-charcoal-500">
+                  Fill in variables to see the resolved prompt
+                </Paragraph>
+              </div>
+            )}
+          </div>
+        </>
+      ) : (
+        <div className="space-y-1">
+          <Header3>Resolved output</Header3>
+          {content ? (
+            <div className="overflow-auto rounded border border-grid-dimmed bg-charcoal-900 p-3">
+              <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed text-text-bright">
+                {content}
+              </pre>
+            </div>
+          ) : (
+            <Paragraph variant="small" className="text-charcoal-500">
+              No content to preview
+            </Paragraph>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Generations Tab ─────────────────────────────────────
+
+type GenerationRow = {
+  run_id: string;
+  span_id: string;
+  operation_id: string;
+  task_identifier: string;
+  response_model: string;
+  input_tokens: number;
+  output_tokens: number;
+  total_cost: number;
+  duration_ms: number;
+  start_time: string;
+};
+
+function GenerationsTab({
+  promptSlug,
+  promptVersion,
+  initialGenerations,
+  initialPagination,
+  selectedSpan,
+  onSelectSpan,
+  generationsSnapshot,
+}: {
+  promptSlug: string;
+  promptVersion: number;
+  initialGenerations: GenerationRow[];
+  initialPagination: { next?: string };
+  selectedSpan: { runId: string; spanId: string } | null;
+  onSelectSpan: (span: { runId: string; spanId: string } | null) => void;
+  generationsSnapshot?: ResizableSnapshot;
+}) {
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+  const { value: searchValue } = useSearchParams();
+  const listRef = useRef<HTMLDivElement>(null);
+  const loadMoreRef = useRef<HTMLDivElement>(null);
+  const fetcher = useFetcher<{ generations: GenerationRow[]; pagination: { next?: string } }>();
+  const pollFetcher = useFetcher<{ generations: GenerationRow[]; pagination: { next?: string } }>();
+
+  // Accumulated generations state
+  const [generations, setGenerations] = useState<GenerationRow[]>(initialGenerations);
+  const [nextCursor, setNextCursor] = useState<string | undefined>(initialPagination.next);
+  const [newGenerationCount, setNewGenerationCount] = useState(0);
+
+  // Build the resource URL for fetches
+  const resourcePath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${
+    environment.slug
+  }/prompts/${encodeURIComponent(promptSlug)}/generations`;
+
+  // Track filter state to reset on change
+  const filterKey = `${searchValue("version") ?? ""}-${searchValue("period") ?? "7d"}-${
+    searchValue("from") ?? ""
+  }-${searchValue("to") ?? ""}`;
+  const prevFilterKeyRef = useRef(filterKey);
+
+  // Reset when filters change (loader re-runs with new initial data)
+  useEffect(() => {
+    if (prevFilterKeyRef.current !== filterKey) {
+      prevFilterKeyRef.current = filterKey;
+      setGenerations(initialGenerations);
+      setNextCursor(initialPagination.next);
+      setNewGenerationCount(0);
+    }
+  }, [filterKey, initialGenerations, initialPagination.next]);
+
+  // Also reset if initialGenerations change identity (page navigation)
+  const initialGenRef = useRef(initialGenerations);
+  useEffect(() => {
+    if (initialGenRef.current !== initialGenerations) {
+      initialGenRef.current = initialGenerations;
+      setGenerations(initialGenerations);
+      setNextCursor(initialPagination.next);
+      setNewGenerationCount(0);
+    }
+  }, [initialGenerations, initialPagination.next]);
+
+  // Append fetched rows when fetcher completes
+  useEffect(() => {
+    if (fetcher.data && fetcher.state === "idle") {
+      setGenerations((prev) => {
+        const existingIds = new Set(prev.map((g) => g.span_id));
+        const newRows = fetcher.data!.generations.filter((g) => !existingIds.has(g.span_id));
+        return newRows.length > 0 ? [...prev, ...newRows] : prev;
+      });
+      setNextCursor(fetcher.data.pagination.next);
+    }
+  }, [fetcher.data, fetcher.state]);
+
+  // Poll for new generations every 10 seconds (also on focus/visibility)
+  useInterval({
+    interval: 5_000,
+    onLoad: false,
+    callback: () => {
+      if (pollFetcher.state !== "idle") return;
+      const params = new URLSearchParams();
+      params.set("version", String(promptVersion));
+      params.set("period", searchValue("period") ?? "7d");
+      const from = searchValue("from");
+      const to = searchValue("to");
+      if (from) params.set("from", from);
+      if (to) params.set("to", to);
+      pollFetcher.load(`${resourcePath}?${params.toString()}`);
+    },
+  });
+
+  // Check poll results for new generations
+  useEffect(() => {
+    if (pollFetcher.data && pollFetcher.state === "idle") {
+      const existingIds = new Set(generations.map((g) => g.span_id));
+      const newCount = pollFetcher.data.generations.filter(
+        (g) => !existingIds.has(g.span_id)
+      ).length;
+      if (newCount > 0) {
+        setNewGenerationCount(newCount);
+      }
+    }
+  }, [pollFetcher.data, pollFetcher.state, generations]);
+
+  const handleRefreshGenerations = useCallback(() => {
+    // Prepend new generations from the poll data
+    if (pollFetcher.data) {
+      setGenerations((prev) => {
+        const existingIds = new Set(prev.map((g) => g.span_id));
+        const newRows = pollFetcher.data!.generations.filter(
+          (g) => !existingIds.has(g.span_id)
+        );
+        return newRows.length > 0 ? [...newRows, ...prev] : prev;
+      });
+    }
+    setNewGenerationCount(0);
+    listRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [pollFetcher.data]);
+
+  const handleLoadMore = useCallback(() => {
+    if (!nextCursor || fetcher.state !== "idle") return;
+
+    const params = new URLSearchParams();
+    params.set("version", String(promptVersion));
+    params.set("period", searchValue("period") ?? "7d");
+    const from = searchValue("from");
+    const to = searchValue("to");
+    if (from) params.set("from", from);
+    if (to) params.set("to", to);
+    params.set("cursor", nextCursor);
+    fetcher.load(`${resourcePath}?${params.toString()}`);
+  }, [
+    nextCursor,
+    fetcher,
+    searchValue,
+    resourcePath,
+    promptVersion,
+  ]);
+
+  // Debounced loading spinner
+  const isLoadingMore = fetcher.state === "loading";
+  const [showSpinner, setShowSpinner] = useState(false);
+  useEffect(() => {
+    if (!isLoadingMore) {
+      setShowSpinner(false);
+      return;
+    }
+    const timer = setTimeout(() => setShowSpinner(true), 200);
+    return () => clearTimeout(timer);
+  }, [isLoadingMore]);
+
+  // IntersectionObserver for infinite scroll
+  useEffect(() => {
+    if (!nextCursor || isLoadingMore) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          handleLoadMore();
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    const currentRef = loadMoreRef.current;
+    if (currentRef) {
+      observer.observe(currentRef);
+    }
+
+    return () => {
+      if (currentRef) {
+        observer.unobserve(currentRef);
+      }
+    };
+  }, [nextCursor, isLoadingMore, handleLoadMore]);
+
+  // Keyboard navigation
+  const selectedIndex = selectedSpan
+    ? generations.findIndex((g) => g.span_id === selectedSpan.spanId)
+    : -1;
+
+  const selectByIndex = useCallback(
+    (index: number) => {
+      const gen = generations[index];
+      if (gen) {
+        onSelectSpan({ runId: gen.run_id, spanId: gen.span_id });
+        const items = listRef.current?.querySelectorAll("[data-generation-item]");
+        items?.[index]?.scrollIntoView({ block: "nearest" });
+      }
+    },
+    [generations, onSelectSpan]
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+
+      if (e.key === "ArrowDown" || e.key === "j") {
+        e.preventDefault();
+        const next = selectedIndex < generations.length - 1 ? selectedIndex + 1 : 0;
+        selectByIndex(next);
+      } else if (e.key === "ArrowUp" || e.key === "k") {
+        e.preventDefault();
+        const prev = selectedIndex > 0 ? selectedIndex - 1 : generations.length - 1;
+        selectByIndex(prev);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedIndex, generations.length, selectByIndex]);
+
+  if (generations.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <InfoPanel
+          title="No generations yet"
+          icon={SparklesIcon}
+          iconClassName="text-purple-500"
+          panelClassName="max-w-md"
+        >
+          <Paragraph variant="small">
+            Generations appear here when this prompt version is resolved inside a task using{" "}
+            <InlineCode variant="small">prompt.resolve()</InlineCode> with an AI SDK call.
+          </Paragraph>
+          <Paragraph variant="small">
+            Try adjusting the time period filter or switching to a different version.
+          </Paragraph>
+        </InfoPanel>
+      </div>
+    );
+  }
+
+  return (
+    <ResizablePanelGroup autosaveId="prompt-generations" snapshot={generationsSnapshot} className="h-full">
+      {/* Span list */}
+      <ResizablePanel id="prompt-gen-list" min="200px">
+        <div
+          ref={listRef}
+          className="h-full overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
+        >
+          {newGenerationCount > 0 && (
+            <div className="sticky top-0 z-10 flex items-center justify-center gap-2 border-b border-grid-dimmed bg-background-bright px-3 py-1.5">
+              <span className="text-xs text-text-dimmed">
+                {newGenerationCount} new {newGenerationCount === 1 ? "generation" : "generations"}
+              </span>
+              <Button
+                variant="minimal/small"
+                onClick={handleRefreshGenerations}
+                LeadingIcon={ArrowPathIcon}
+              >
+                Refresh
+              </Button>
+            </div>
+          )}
+          {generations.map((gen, i) => {
+            const isSelected = selectedSpan?.spanId === gen.span_id;
+            const runPath = v3RunSpanPath(
+              organization,
+              project,
+              environment,
+              { friendlyId: gen.run_id },
+              { spanId: gen.span_id }
+            );
+            return (
+              <div
+                key={`${gen.run_id}-${gen.span_id}-${i}`}
+                data-generation-item
+                onClick={() => onSelectSpan({ runId: gen.run_id, spanId: gen.span_id })}
+                className={`cursor-pointer border-b border-grid-dimmed px-3 py-2 text-xs transition last:border-0 ${
+                  isSelected ? "bg-indigo-500/10" : "hover:bg-charcoal-850"
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-medium text-text-bright">
+                    {gen.operation_id || gen.task_identifier}
+                  </span>
+                  <span className="text-text-dimmed">{gen.start_time}</span>
+                </div>
+                <div className="mt-0.5 flex items-center justify-between">
+                  <div className="flex items-center gap-3 text-text-dimmed">
+                    <span>{gen.response_model}</span>
+                    <span>{gen.input_tokens + gen.output_tokens} tokens</span>
+                    <span>{formatCost(gen.total_cost)}</span>
+                    <span>{Math.round(gen.duration_ms)}ms</span>
+                  </div>
+                  <TextLink to={runPath} className="text-xs" onClick={(e) => e.stopPropagation()}>
+                    View run
+                  </TextLink>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* Infinite scroll sentinel */}
+          <div ref={loadMoreRef} className="h-px" />
+          {showSpinner && (
+            <div className="flex items-center justify-center py-3">
+              <Spinner className="size-4" />
+            </div>
+          )}
+        </div>
+      </ResizablePanel>
+
+      <ResizableHandle id="prompt-gen-handle" />
+
+      {/* Span inspector */}
+      <ResizablePanel id="prompt-gen-inspector" default="40%" min="200px" isStaticAtRest>
+        {selectedSpan ? (
+          <SpanView
+            runParam={selectedSpan.runId}
+            spanId={selectedSpan.spanId}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center bg-background-bright">
+            <Paragraph variant="small" className="text-text-dimmed">
+              Select a generation to inspect
+            </Paragraph>
+          </div>
+        )}
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
+
+function formatCost(cost: number): string {
+  if (cost >= 1) return `$${cost.toFixed(2)}`;
+  if (cost >= 0.01) return `$${cost.toFixed(4)}`;
+  if (cost === 0) return "$0";
+  return `$${cost.toFixed(6)}`;
+}
+
+// ─── Metrics Tab ─────────────────────────────────────────
+
+function MetricsTab({
+  prompt,
+  versions,
+  organizationId,
+  projectId,
+  environmentId,
+  period,
+  from,
+  to,
+}: {
+  prompt: { slug: string };
+  versions: VersionData[];
+  organizationId: string;
+  projectId: string;
+  environmentId: string;
+  period: string;
+  from: string | null;
+  to: string | null;
+}) {
+  const widgetProps = {
+    organizationId,
+    projectId,
+    environmentId,
+    scope: "environment" as const,
+    period,
+    from,
+    to,
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Summary big numbers */}
+      <div className="grid grid-cols-4 gap-2">
+        <div className="h-32">
+          <MetricWidget
+            widgetKey={`prompt-${prompt.slug}-generations`}
+            title="Total"
+            query={`SELECT count() AS generations FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            config={{
+              type: "bignumber",
+              column: "generations",
+              aggregation: "sum",
+              abbreviate: true,
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-32">
+          <MetricWidget
+            widgetKey={`prompt-${prompt.slug}-tokens`}
+            title="Avg input tokens"
+            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            config={{
+              type: "bignumber",
+              column: "avg_input",
+              aggregation: "avg",
+              abbreviate: true,
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-32">
+          <MetricWidget
+            widgetKey={`prompt-${prompt.slug}-cost`}
+            title="Avg input cost"
+            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            config={{
+              type: "bignumber",
+              column: "avg_cost",
+              aggregation: "avg",
+              abbreviate: false,
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-32">
+          <MetricWidget
+            widgetKey={`prompt-${prompt.slug}-latency`}
+            title="Avg latency"
+            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            config={{
+              type: "bignumber",
+              column: "avg_ms",
+              aggregation: "avg",
+              abbreviate: false,
+              suffix: "ms",
+            }}
+            {...widgetProps}
+          />
+        </div>
+      </div>
+
+      {/* Version performance */}
+      <VersionPerformanceSection
+        promptSlug={prompt.slug}
+        versions={versions}
+        organizationId={organizationId}
+        projectId={projectId}
+        environmentId={environmentId}
+        period={period}
+        from={from}
+        to={to}
+      />
+    </div>
+  );
+}
+
+// ─── Version Filter ──────────────────────────────────────
+
+function VersionFilter({
+  versions,
+  selectedVersions,
+  onChange,
+}: {
+  versions: VersionData[];
+  selectedVersions: string[];
+  onChange: (versions: string[]) => void;
+}) {
+  if (selectedVersions.length === 0 || selectedVersions.every((v) => v === "")) {
+    return (
+      <SelectProvider value={selectedVersions} setValue={onChange} virtualFocus={true}>
+        <SelectTrigger variant="tertiary/small" tooltipTitle="Filter by version">
+          Version
+        </SelectTrigger>
+        <SelectPopover>
+          <SelectList>
+            {versions.map((v) => (
+              <SelectItem key={v.id} value={String(v.version)}>
+                v{v.version}
+                {v.labels.includes("current") ? " (current)" : ""}
+                {v.labels.includes("latest") ? " (latest)" : ""}
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectPopover>
+      </SelectProvider>
+    );
+  }
+
+  const summary =
+    selectedVersions.length === 1
+      ? `v${selectedVersions[0]}`
+      : `${selectedVersions.length} versions`;
+
+  return (
+    <SelectProvider value={selectedVersions} setValue={onChange} virtualFocus={true}>
+      <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+        <AppliedFilter
+          label="Version"
+          value={summary}
+          onRemove={() => onChange([])}
+          variant="secondary/small"
+        />
+      </Ariakit.Select>
+      <SelectPopover>
+        <SelectList>
+          {versions.map((v) => (
+            <SelectItem key={v.id} value={String(v.version)}>
+              v{v.version}
+              {v.labels.includes("current") ? " (current)" : ""}
+              {v.labels.includes("latest") ? " (latest)" : ""}
+            </SelectItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
+// ─── Version Performance Section ─────────────────────────
+
+function VersionPerformanceSection({
+  promptSlug,
+  versions,
+  organizationId,
+  projectId,
+  environmentId,
+  period,
+  from,
+  to,
+}: {
+  promptSlug: string;
+  versions: VersionData[];
+  organizationId: string;
+  projectId: string;
+  environmentId: string;
+  period: string;
+  from: string | null;
+  to: string | null;
+}) {
+  const [selectedVersions, setSelectedVersions] = useState<string[]>([]);
+
+  const versionFilter =
+    selectedVersions.length > 0 ? ` AND prompt_version IN (${selectedVersions.join(",")})` : "";
+
+  const widgetProps = {
+    organizationId,
+    projectId,
+    environmentId,
+    scope: "environment" as const,
+    period,
+    from,
+    to,
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Header3>Version performance</Header3>
+        <VersionFilter
+          versions={versions}
+          selectedVersions={selectedVersions}
+          onChange={setSelectedVersions}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        {/* Row 1: Latency + TTFC */}
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-latency-${selectedVersions.join(",")}`}
+            title="Latency p50 / p95"
+            query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-ttfc-${selectedVersions.join(",")}`}
+            title="TTFC p50 / p95"
+            query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND ms_to_first_chunk > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+        {/* Row 2: Input tokens + Input cost */}
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-input-tokens-${selectedVersions.join(",")}`}
+            title="Input tokens p50 / p95"
+            query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-input-cost-${selectedVersions.join(",")}`}
+            title="Input cost per 1k tokens (p50 / p95)"
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND input_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+        {/* Row 3: Output tokens + Output cost */}
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-output-tokens-${selectedVersions.join(",")}`}
+            title="Output tokens p50 / p95"
+            query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+        <div className="h-96">
+          <MetricWidget
+            widgetKey={`prompt-${promptSlug}-perf-output-cost-${selectedVersions.join(",")}`}
+            title="Output cost per 1k tokens (p50 / p95)"
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND output_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            config={{
+              type: "chart",
+              chartType: "line",
+              xAxisColumn: "timebucket",
+              yAxisColumns: ["p50", "p95"],
+              groupByColumn: null,
+              stacked: false,
+              sortByColumn: null,
+              sortDirection: "asc",
+              aggregation: "avg",
+            }}
+            {...widgetProps}
+          />
+        </div>
+      </div>
+
+      <div className="h-48">
+        <MetricWidget
+          widgetKey={`prompt-${promptSlug}-perf-versions-table-${selectedVersions.join(",")}`}
+          title="Version summary"
+          query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY prompt_version ORDER BY prompt_version DESC`}
+          config={{ type: "table", prettyFormatting: true, sorting: [] }}
+          {...widgetProps}
+        />
+      </div>
+    </div>
+  );
+}
+
+// ─── Versions Tab ────────────────────────────────────────
+
+function VersionsTab({
+  versions,
+  selectedVersion,
+  onSelectVersion,
+}: {
+  versions: VersionData[];
+  selectedVersion: VersionData | undefined;
+  onSelectVersion: (version: number) => void;
+}) {
+  return (
+    <div>
+      {versions.map((v) => {
+        const isSelected = selectedVersion?.id === v.id;
+        const isCurrent = v.labels.includes("current");
+        const isLatest = v.labels.includes("latest");
+        const isOverride = v.labels.includes("override");
+
+        const dotColor = isOverride
+          ? "bg-amber-400"
+          : isCurrent
+          ? "bg-green-500"
+          : "bg-charcoal-600";
+
+        return (
+          <div
+            key={v.id}
+            onClick={() => onSelectVersion(v.version)}
+            className={`group flex cursor-pointer items-start gap-2.5 border-b border-grid-dimmed px-3 py-2 transition last:border-0 ${
+              isSelected ? "bg-indigo-500/10" : "hover:bg-charcoal-850"
+            }`}
+          >
+            {/* Timeline dot */}
+            <div className="flex flex-col items-center pt-1.5">
+              <div className={`size-2 rounded-full ${dotColor}`} />
+            </div>
+
+            {/* Content */}
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-1.5">
+                  <span
+                    className={`text-xs font-medium ${
+                      isSelected ? "text-text-bright" : "text-text-bright"
+                    }`}
+                  >
+                    v{v.version}
+                  </span>
+                  {isOverride && (
+                    <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
+                      override
+                    </Badge>
+                  )}
+                  {isCurrent && <Badge variant="extra-small">current</Badge>}
+                  {isLatest && !isCurrent && <Badge variant="extra-small">latest</Badge>}
+                </div>
+                <span className="text-xxs text-text-dimmed">
+                  <DateTime date={v.createdAt} />
+                </span>
+              </div>
+
+              <div className="flex items-center gap-1.5 text-xxs text-text-dimmed">
+                <span className={v.source !== "code" ? "text-amber-400" : ""}>{v.source}</span>
+                {v.model && (
+                  <>
+                    <span className="text-charcoal-600">/</span>
+                    <span>{v.model}</span>
+                  </>
+                )}
+                {v.commitMessage && (
+                  <>
+                    <span className="text-charcoal-600">/</span>
+                    <span className="truncate">{v.commitMessage}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
new file mode 100644
index 00000000000..0100537b49f
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
@@ -0,0 +1,191 @@
+import { type MetaFunction } from "@remix-run/react";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { Area, AreaChart, ResponsiveContainer } from "recharts";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { PromptsNone } from "~/components/BlankStatePanels";
+import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+import { Badge } from "~/components/primitives/Badge";
+import { DateTime } from "~/components/primitives/DateTime";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import {
+  Table,
+  TableBlankRow,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "~/components/primitives/Table";
+import { useEnvironment } from "~/hooks/useEnvironment";
+import { useOrganization } from "~/hooks/useOrganizations";
+import { useProject } from "~/hooks/useProject";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema, v3PromptsPath } from "~/utils/pathBuilder";
+
+export const meta: MetaFunction = () => {
+  return [{ title: "Prompts | Trigger.dev" }];
+};
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) {
+    throw new Response("Project not found", { status: 404 });
+  }
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) {
+    throw new Response("Environment not found", { status: 404 });
+  }
+
+  const presenter = new PromptPresenter(clickhouseClient);
+  const prompts = await presenter.listPrompts(project.id, environment.id);
+
+  const sparklines = await presenter.getUsageSparklines(
+    environment.id,
+    prompts.map((p) => p.slug)
+  );
+
+  return typedjson({ prompts, sparklines });
+};
+
+export default function PromptsPage() {
+  const { prompts, sparklines } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
+
+  if (prompts.length === 0) {
+    return (
+      <PageContainer>
+        <NavBar>
+          <PageTitle title="Prompts" />
+        </NavBar>
+        <PageBody>
+          <MainCenteredContainer className="max-w-lg">
+            <PromptsNone />
+          </MainCenteredContainer>
+        </PageBody>
+      </PageContainer>
+    );
+  }
+
+  return (
+    <PageContainer>
+      <NavBar>
+        <PageTitle title="Prompts" />
+      </NavBar>
+      <PageBody scrollable={false}>
+        <Table containerClassName="border-t-0">
+          <TableHeader>
+            <TableRow>
+              <TableHeaderCell>ID</TableHeaderCell>
+              <TableHeaderCell>Prompt</TableHeaderCell>
+              <TableHeaderCell>Model</TableHeaderCell>
+              <TableHeaderCell>Current</TableHeaderCell>
+              <TableHeaderCell>Usage (24h)</TableHeaderCell>
+              <TableHeaderCell alignment="right">Last updated</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {prompts.length === 0 ? (
+              <TableBlankRow colSpan={6}>No prompts found</TableBlankRow>
+            ) : (
+              prompts.map((prompt) => {
+                const path = `${v3PromptsPath(organization, project, environment)}/${prompt.slug}`;
+
+                return (
+                  <TableRow key={prompt.id}>
+                    <TableCell to={path} isTabbableCell>
+                      <TruncatedCopyableValue value={prompt.friendlyId} />
+                    </TableCell>
+                    <TableCell to={path}>
+                      <div className="flex flex-col">
+                        <div className="flex items-center gap-1.5">
+                          <span className="text-text-bright">{prompt.slug}</span>
+                          {prompt.hasOverride && (
+                            <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
+                              override
+                            </Badge>
+                          )}
+                        </div>
+                        {prompt.description && (
+                          <span className="text-xs text-text-dimmed">{prompt.description}</span>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell to={path}>
+                      <span className="text-text-dimmed">
+                        {prompt.defaultModel ?? <span className="text-charcoal-500">-</span>}
+                      </span>
+                    </TableCell>
+                    <TableCell to={path}>
+                      {prompt.currentVersion ? (
+                        <div className="flex items-center gap-1.5">
+                          <div className="size-1.5 rounded-full bg-green-500" />
+                          <span className="text-text-bright">
+                            v{prompt.currentVersion.version}
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="text-charcoal-500">-</span>
+                      )}
+                    </TableCell>
+                    <TableCell to={path}>
+                      <UsageSparkline data={sparklines[prompt.slug]} />
+                    </TableCell>
+                    <TableCell to={path} alignment="right">
+                      <DateTime date={prompt.updatedAt} />
+                    </TableCell>
+                  </TableRow>
+                );
+              })
+            )}
+          </TableBody>
+        </Table>
+      </PageBody>
+    </PageContainer>
+  );
+}
+
+function UsageSparkline({ data }: { data?: number[] }) {
+  if (!data || data.every((v) => v === 0)) {
+    return <span className="text-charcoal-500">-</span>;
+  }
+
+  const total = data.reduce((a, b) => a + b, 0);
+  const chartData = data.map((value) => ({ value }));
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="h-6 w-16">
+        <ResponsiveContainer width="100%" height="100%">
+          <AreaChart data={chartData} margin={{ top: 1, right: 0, bottom: 1, left: 0 }}>
+            <defs>
+              <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} />
+                <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            <Area
+              type="monotone"
+              dataKey="value"
+              stroke="#3b82f6"
+              strokeWidth={1.5}
+              fill="url(#sparkFill)"
+              isAnimationActive={false}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </div>
+      <span className="text-xs tabular-nums text-text-dimmed">{total.toLocaleString()}</span>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 118226906e1..9e3b6f949dc 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -51,6 +51,7 @@ import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
+  type ResizableSnapshot,
 } from "~/components/primitives/Resizable";
 import { ShortcutKey, variants } from "~/components/primitives/ShortcutKey";
 import { Slider } from "~/components/primitives/Slider";
@@ -303,7 +304,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 type LoaderData = SerializeFrom<typeof loader>;
 
 export default function Page() {
-  const { run, trace, maximumLiveReloadingSetting, runsList } = useLoaderData<typeof loader>();
+  const { run, trace, maximumLiveReloadingSetting, runsList, resizable } =
+    useLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -427,9 +429,10 @@ export default function Page() {
             run={run}
             trace={trace}
             maximumLiveReloadingSetting={maximumLiveReloadingSetting}
+            resizable={resizable}
           />
         ) : (
-          <NoLogsView run={run} />
+          <NoLogsView run={run} resizable={resizable} />
         )}
       </PageBody>
     </>
@@ -458,7 +461,8 @@ function TraceView({
   run,
   trace,
   maximumLiveReloadingSetting,
-}: Pick<LoaderData, "run" | "trace" | "maximumLiveReloadingSetting">) {
+  resizable,
+}: Pick<LoaderData, "run" | "trace" | "maximumLiveReloadingSetting" | "resizable">) {
   const organization = useOrganization();
   const project = useProject();
   const environment = useEnvironment();
@@ -505,7 +509,7 @@ function TraceView({
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
       <ResizablePanelGroup
         autosaveId={resizableSettings.parent.autosaveId}
-        // snapshot={resizable.parent}
+        snapshot={resizable.parent}
         className="h-full max-h-full"
       >
         <ResizablePanel
@@ -535,6 +539,7 @@ function TraceView({
             rootRun={run.rootTaskRun}
             parentRun={run.parentTaskRun}
             isCompleted={run.completedAt !== null}
+            treeSnapshot={resizable.tree}
           />
         </ResizablePanel>
         <ResizableHandle id={resizableSettings.parent.handleId} />
@@ -560,7 +565,7 @@ function TraceView({
   );
 }
 
-function NoLogsView({ run }: Pick<LoaderData, "run">) {
+function NoLogsView({ run, resizable }: Pick<LoaderData, "run" | "resizable">) {
   const plan = useCurrentPlan();
   const organization = useOrganization();
 
@@ -580,7 +585,7 @@ function NoLogsView({ run }: Pick<LoaderData, "run">) {
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
       <ResizablePanelGroup
         autosaveId={resizableSettings.parent.autosaveId}
-        // snapshot={resizable.parent}
+        snapshot={resizable.parent}
         className="h-full max-h-full"
       >
         <ResizablePanel
@@ -671,6 +676,7 @@ type TasksTreeViewProps = {
     spanId: string;
   } | null;
   isCompleted: boolean;
+  treeSnapshot?: ResizableSnapshot;
 };
 
 function TasksTreeView({
@@ -687,6 +693,7 @@ function TasksTreeView({
   rootRun,
   parentRun,
   isCompleted,
+  treeSnapshot,
 }: TasksTreeViewProps) {
   const isAdmin = useHasAdminAccess();
   const [filterText, setFilterText] = useState("");
@@ -770,7 +777,7 @@ function TasksTreeView({
           onCheckedChange={(e) => setErrorsOnly(e.valueOf())}
         />
       </div>
-      <ResizablePanelGroup autosaveId={resizableSettings.tree.autosaveId}>
+      <ResizablePanelGroup autosaveId={resizableSettings.tree.autosaveId} snapshot={treeSnapshot}>
         {/* Tree list */}
         <ResizablePanel
           id={resizableSettings.tree.tree.id}
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.override.reactivate.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.override.reactivate.ts
new file mode 100644
index 00000000000..1203682793a
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.override.reactivate.ts
@@ -0,0 +1,71 @@
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+import { PromptService } from "~/v3/services/promptService.server";
+
+const ParamsSchema = z.object({
+  slug: z.string(),
+});
+
+const Body = z.object({
+  version: z.number().int().positive(),
+});
+
+const { action } = createActionApiRoute(
+  {
+    params: ParamsSchema,
+    body: Body,
+    method: "POST",
+    allowJWT: true,
+    corsStrategy: "all",
+    authorization: {
+      action: "update",
+      resource: (params) => ({ prompts: params.slug }),
+      superScopes: ["admin"],
+    },
+  },
+  async ({ body, params, authentication }) => {
+    const prompt = await prisma.prompt.findUnique({
+      where: {
+        projectId_runtimeEnvironmentId_slug: {
+          projectId: authentication.environment.projectId,
+          runtimeEnvironmentId: authentication.environment.id,
+          slug: params.slug,
+        },
+      },
+    });
+
+    if (!prompt) {
+      return json({ error: "Prompt not found" }, { status: 404 });
+    }
+
+    const targetVersion = await prisma.promptVersion.findUnique({
+      where: {
+        promptId_version: {
+          promptId: prompt.id,
+          version: body.version,
+        },
+      },
+    });
+
+    if (!targetVersion) {
+      return json({ error: `Version ${body.version} not found` }, { status: 404 });
+    }
+
+    try {
+      const service = new PromptService();
+      await service.reactivateOverride(prompt.id, targetVersion.id);
+    } catch (e) {
+      if (e instanceof ServiceValidationError) {
+        return json({ error: e.message }, { status: e.status ?? 400 });
+      }
+      throw e;
+    }
+
+    return json({ ok: true });
+  }
+);
+
+export { action };
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
new file mode 100644
index 00000000000..9964d5f9e1a
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
@@ -0,0 +1,117 @@
+import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { authenticateApiRequestWithFailure } from "~/services/apiAuth.server";
+import { apiCors } from "~/utils/apiCors";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+import { PromptService } from "~/v3/services/promptService.server";
+
+const ParamsSchema = z.object({
+  slug: z.string(),
+});
+
+const CreateBody = z.object({
+  textContent: z.string(),
+  model: z.string().optional(),
+  commitMessage: z.string().optional(),
+  source: z.string().optional(),
+});
+
+const UpdateBody = z.object({
+  textContent: z.string().optional(),
+  model: z.string().optional(),
+  commitMessage: z.string().optional(),
+});
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  if (request.method.toUpperCase() === "OPTIONS") {
+    return apiCors(request, json({}));
+  }
+  return new Response(null, { status: 405 });
+}
+
+export async function action({ request, params }: ActionFunctionArgs) {
+  const authResult = await authenticateApiRequestWithFailure(request, { allowJWT: true });
+  if (!authResult) {
+    return apiCors(request, json({ error: "Invalid or Missing API Key" }, { status: 401 }));
+  }
+
+  if (!authResult.ok) {
+    return apiCors(request, json({ error: authResult.error }, { status: 401 }));
+  }
+
+  const { slug } = ParamsSchema.parse(params);
+
+  const prompt = await prisma.prompt.findUnique({
+    where: {
+      projectId_runtimeEnvironmentId_slug: {
+        projectId: authResult.environment.projectId,
+        runtimeEnvironmentId: authResult.environment.id,
+        slug,
+      },
+    },
+  });
+
+  if (!prompt) {
+    return apiCors(request, json({ error: "Prompt not found" }, { status: 404 }));
+  }
+
+  const method = request.method.toUpperCase();
+  const service = new PromptService();
+
+  if (method === "POST") {
+    const rawBody = await request.json();
+    const parsed = CreateBody.safeParse(rawBody);
+    if (!parsed.success) {
+      return apiCors(
+        request,
+        json({ error: "Invalid request body", issues: parsed.error.issues }, { status: 400 })
+      );
+    }
+
+    const result = await service.createOverride(prompt.id, {
+      textContent: parsed.data.textContent,
+      model: parsed.data.model,
+      commitMessage: parsed.data.commitMessage,
+      source: parsed.data.source ?? "api",
+    });
+
+    return apiCors(request, json({ ok: true, version: result.version }));
+  }
+
+  if (method === "PUT" || method === "PATCH") {
+    const rawBody = await request.json();
+    const parsed = UpdateBody.safeParse(rawBody);
+    if (!parsed.success) {
+      return apiCors(
+        request,
+        json({ error: "Invalid request body", issues: parsed.error.issues }, { status: 400 })
+      );
+    }
+
+    try {
+      await service.updateOverride(prompt.id, parsed.data);
+    } catch (e) {
+      if (e instanceof ServiceValidationError) {
+        return apiCors(
+          request,
+          json({ error: e.message }, { status: e.status ?? 400 })
+        );
+      }
+      throw e;
+    }
+
+    return apiCors(request, json({ ok: true }));
+  }
+
+  if (method === "DELETE") {
+    await service.removeOverride(prompt.id);
+    return apiCors(request, json({ ok: true }));
+  }
+
+  return apiCors(
+    request,
+    json({ error: "Method not allowed" }, { status: 405, headers: { Allow: "POST, PUT, DELETE" } })
+  );
+}
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.promote.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.promote.ts
new file mode 100644
index 00000000000..6040fdb46e6
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.promote.ts
@@ -0,0 +1,71 @@
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { createActionApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+import { PromptService } from "~/v3/services/promptService.server";
+
+const ParamsSchema = z.object({
+  slug: z.string(),
+});
+
+const Body = z.object({
+  version: z.number().int().positive(),
+});
+
+const { action } = createActionApiRoute(
+  {
+    params: ParamsSchema,
+    body: Body,
+    method: "POST",
+    allowJWT: true,
+    corsStrategy: "all",
+    authorization: {
+      action: "update",
+      resource: (params) => ({ prompts: params.slug }),
+      superScopes: ["admin"],
+    },
+  },
+  async ({ body, params, authentication }) => {
+    const prompt = await prisma.prompt.findUnique({
+      where: {
+        projectId_runtimeEnvironmentId_slug: {
+          projectId: authentication.environment.projectId,
+          runtimeEnvironmentId: authentication.environment.id,
+          slug: params.slug,
+        },
+      },
+    });
+
+    if (!prompt) {
+      return json({ error: "Prompt not found" }, { status: 404 });
+    }
+
+    const targetVersion = await prisma.promptVersion.findUnique({
+      where: {
+        promptId_version: {
+          promptId: prompt.id,
+          version: body.version,
+        },
+      },
+    });
+
+    if (!targetVersion) {
+      return json({ error: `Version ${body.version} not found` }, { status: 404 });
+    }
+
+    try {
+      const service = new PromptService();
+      await service.promoteVersion(prompt.id, targetVersion.id, { sourceGuard: true });
+    } catch (e) {
+      if (e instanceof ServiceValidationError) {
+        return json({ error: e.message }, { status: e.status ?? 400 });
+      }
+      throw e;
+    }
+
+    return json({ ok: true });
+  }
+);
+
+export { action };
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.ts
new file mode 100644
index 00000000000..32ea1525c14
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.ts
@@ -0,0 +1,174 @@
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import {
+  createActionApiRoute,
+  createLoaderApiRoute,
+} from "~/services/routeBuilders/apiBuilder.server";
+
+const ParamsSchema = z.object({
+  slug: z.string(),
+});
+
+const SearchParams = z.object({
+  label: z.string().optional(),
+  version: z.coerce.number().optional(),
+});
+
+// GET /api/v1/prompts/:slug — Get prompt + version
+export const loader = createLoaderApiRoute(
+  {
+    params: ParamsSchema,
+    searchParams: SearchParams,
+    allowJWT: true,
+    corsStrategy: "all",
+    findResource: async (params, authentication) => {
+      return prisma.prompt.findUnique({
+        where: {
+          projectId_runtimeEnvironmentId_slug: {
+            projectId: authentication.environment.projectId,
+            runtimeEnvironmentId: authentication.environment.id,
+            slug: params.slug,
+          },
+        },
+      });
+    },
+    authorization: {
+      action: "read",
+      resource: (_resource, params) => ({ prompts: params.slug }),
+      superScopes: ["read:prompts", "admin"],
+    },
+  },
+  async ({ searchParams, resource: prompt }) => {
+    if (!prompt) {
+      return json({ error: "Prompt not found" }, { status: 404 });
+    }
+
+    const presenter = new PromptPresenter(clickhouseClient);
+    const version = await presenter.resolveVersion(prompt.id, {
+      version: searchParams.version,
+      label: searchParams.label,
+    });
+
+    if (!version) {
+      return json({ error: "No version found" }, { status: 404 });
+    }
+
+    return json({
+      data: {
+        id: prompt.friendlyId,
+        slug: prompt.slug,
+        description: prompt.description,
+        type: prompt.type,
+        tags: prompt.tags,
+        defaultModel: prompt.defaultModel,
+        defaultConfig: prompt.defaultConfig,
+        variableSchema: prompt.variableSchema,
+        version: {
+          version: version.version,
+          textContent: version.textContent,
+          model: version.model,
+          config: version.config,
+          source: version.source,
+          labels: version.labels,
+          contentHash: version.contentHash,
+          commitMessage: version.commitMessage,
+          createdAt: version.createdAt,
+        },
+      },
+    });
+  }
+);
+
+// POST /api/v1/prompts/:slug — Resolve prompt with variables
+
+const ResolveBody = z.object({
+  variables: z.record(z.unknown()).default({}),
+  label: z.string().optional(),
+  version: z.number().optional(),
+});
+
+const { action } = createActionApiRoute(
+  {
+    params: ParamsSchema,
+    body: ResolveBody,
+    allowJWT: true,
+    corsStrategy: "all",
+    authorization: {
+      action: "read",
+      resource: (params) => ({ prompts: params.slug }),
+      superScopes: ["read:prompts", "admin"],
+    },
+  },
+  async ({ body, params, authentication }) => {
+    const prompt = await prisma.prompt.findUnique({
+      where: {
+        projectId_runtimeEnvironmentId_slug: {
+          projectId: authentication.environment.projectId,
+          runtimeEnvironmentId: authentication.environment.id,
+          slug: params.slug,
+        },
+      },
+    });
+
+    if (!prompt) {
+      return json({ error: "Prompt not found" }, { status: 404 });
+    }
+
+    const presenter = new PromptPresenter(clickhouseClient);
+    const version = await presenter.resolveVersion(prompt.id, {
+      version: body.version,
+      label: body.label,
+    });
+
+    if (!version) {
+      return json({ error: "No version found" }, { status: 404 });
+    }
+
+    if (!version.textContent) {
+      return json({ error: "Prompt has no content" }, { status: 404 });
+    }
+
+    const text = compileTemplate(version.textContent, body.variables);
+    return json({
+      data: {
+        promptId: prompt.friendlyId,
+        slug: prompt.slug,
+        version: version.version,
+        labels: version.labels,
+        template: version.textContent,
+        text,
+        model: version.model ?? prompt.defaultModel,
+        config: version.config ?? prompt.defaultConfig,
+      },
+    });
+  }
+);
+
+export { action };
+
+function compileTemplate(
+  template: string,
+  variables: Record<string, unknown>
+): string {
+  let result = template.replace(
+    /\{\{#(\w+)\}\}([\s\S]*?)\{\{\/\1\}\}/g,
+    (_match, key, content) => {
+      const value = variables[key];
+      return value
+        ? content.replace(/\{\{(\w+)\}\}/g, (_m: string, k: string) => {
+            return String(variables[k] ?? "");
+          })
+        : "";
+    }
+  );
+
+  result = result.replace(/\{\{\s*(\w+)\s*\}\}/g, (_match, key) => {
+    const value = variables[key];
+    return value !== undefined && value !== null ? String(value) : "";
+  });
+
+  return result;
+}
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.versions.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.versions.ts
new file mode 100644
index 00000000000..c40b3e62dbf
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.versions.ts
@@ -0,0 +1,56 @@
+import { json } from "@remix-run/server-runtime";
+import { z } from "zod";
+import { prisma } from "~/db.server";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { createLoaderApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+
+const ParamsSchema = z.object({
+  slug: z.string(),
+});
+
+export const loader = createLoaderApiRoute(
+  {
+    params: ParamsSchema,
+    allowJWT: true,
+    corsStrategy: "all",
+    findResource: async (params, authentication) => {
+      return prisma.prompt.findUnique({
+        where: {
+          projectId_runtimeEnvironmentId_slug: {
+            projectId: authentication.environment.projectId,
+            runtimeEnvironmentId: authentication.environment.id,
+            slug: params.slug,
+          },
+        },
+      });
+    },
+    authorization: {
+      action: "read",
+      resource: (_resource, params) => ({ prompts: params.slug }),
+      superScopes: ["read:prompts", "admin"],
+    },
+  },
+  async ({ resource: prompt }) => {
+    if (!prompt) {
+      return json({ error: "Prompt not found" }, { status: 404 });
+    }
+
+    const presenter = new PromptPresenter(clickhouseClient);
+    const versions = await presenter.listVersions(prompt.id);
+
+    return json({
+      data: versions.map((v) => ({
+        id: v.id,
+        version: v.version,
+        labels: v.labels,
+        source: v.source,
+        model: v.model,
+        textContent: v.textContent,
+        commitMessage: v.commitMessage,
+        contentHash: v.contentHash,
+        createdAt: v.createdAt.toISOString(),
+      })),
+    });
+  }
+);
diff --git a/apps/webapp/app/routes/api.v1.prompts._index.ts b/apps/webapp/app/routes/api.v1.prompts._index.ts
new file mode 100644
index 00000000000..ccbc0ec38d0
--- /dev/null
+++ b/apps/webapp/app/routes/api.v1.prompts._index.ts
@@ -0,0 +1,37 @@
+import { json } from "@remix-run/server-runtime";
+import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { createLoaderApiRoute } from "~/services/routeBuilders/apiBuilder.server";
+
+export const loader = createLoaderApiRoute(
+  {
+    allowJWT: true,
+    corsStrategy: "all",
+    findResource: async () => 1,
+    authorization: {
+      action: "read",
+      resource: () => ({ prompts: "all" }),
+      superScopes: ["read:prompts", "admin"],
+    },
+  },
+  async ({ authentication }) => {
+    const presenter = new PromptPresenter(clickhouseClient);
+    const prompts = await presenter.listPrompts(
+      authentication.environment.projectId,
+      authentication.environment.id
+    );
+
+    return json({
+      data: prompts.map((p) => ({
+        slug: p.slug,
+        friendlyId: p.friendlyId,
+        description: p.description,
+        tags: p.tags,
+        defaultModel: p.defaultModel,
+        currentVersion: p.currentVersion?.version ?? null,
+        hasOverride: p.hasOverride,
+        updatedAt: p.updatedAt.toISOString(),
+      })),
+    });
+  }
+);
diff --git a/apps/webapp/app/routes/resources.metric.tsx b/apps/webapp/app/routes/resources.metric.tsx
index 60d83f7a600..9f6cea61917 100644
--- a/apps/webapp/app/routes/resources.metric.tsx
+++ b/apps/webapp/app/routes/resources.metric.tsx
@@ -45,6 +45,7 @@ const MetricWidgetQuery = z.object({
   taskIdentifiers: z.array(z.string()).optional(),
   queues: z.array(z.string()).optional(),
   responseModels: z.array(z.string()).optional(),
+  promptSlugs: z.array(z.string()).optional(),
   tags: z.array(z.string()).optional(),
 });
 
@@ -76,6 +77,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     taskIdentifiers,
     queues,
     responseModels,
+    promptSlugs,
     tags,
   } = submission.data;
 
@@ -110,6 +112,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     taskIdentifiers,
     queues,
     responseModels,
+    promptSlugs,
     // Set higher concurrency if many widgets are on screen at once
     customOrgConcurrencyLimit: env.METRIC_WIDGET_DEFAULT_ORG_CONCURRENCY_LIMIT,
   });
@@ -158,6 +161,8 @@ type MetricWidgetProps = {
   onDelete?: () => void;
   /** Callback when duplicate is clicked - receives current data */
   onDuplicate?: (data: QueryWidgetData) => void;
+  /** Column names to hide from table display but keep in row data (useful for linking) */
+  hiddenColumns?: string[];
 } & z.infer<typeof MetricWidgetQuery>;
 
 export function MetricWidget({
@@ -171,6 +176,7 @@ export function MetricWidget({
   onRename,
   onDelete,
   onDuplicate,
+  hiddenColumns,
   ...props
 }: MetricWidgetProps) {
   const [response, setResponse] = useState<MetricWidgetActionResponse | null>(null);
@@ -261,6 +267,7 @@ export function MetricWidget({
     JSON.stringify(props.taskIdentifiers),
     JSON.stringify(props.queues),
     JSON.stringify(props.responseModels),
+    JSON.stringify(props.promptSlugs),
   ]);
 
   const data = response?.success
@@ -286,6 +293,7 @@ export function MetricWidget({
         onRename={onRename}
         onDelete={onDelete}
         onDuplicate={onDuplicate}
+        hiddenColumns={hiddenColumns}
       />
     </div>
   );
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
new file mode 100644
index 00000000000..66903d95b05
--- /dev/null
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
@@ -0,0 +1,74 @@
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { json } from "@remix-run/node";
+import { z } from "zod";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import { findProjectBySlug } from "~/models/project.server";
+import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import {
+  PromptPresenter,
+  type GenerationRow,
+  type GenerationsPagination,
+} from "~/presenters/v3/PromptPresenter.server";
+
+export type { GenerationRow, GenerationsPagination };
+
+export type GenerationsResponse = {
+  generations: GenerationRow[];
+  pagination: GenerationsPagination;
+};
+
+function parsePeriodToMs(period: string): number {
+  const match = period.match(/^(\d+)([mhdw])$/);
+  if (!match) return 7 * 24 * 60 * 60 * 1000;
+  const [, numStr, unit] = match;
+  const num = parseInt(numStr, 10);
+  switch (unit) {
+    case "m":
+      return num * 60 * 1000;
+    case "h":
+      return num * 60 * 60 * 1000;
+    case "d":
+      return num * 24 * 60 * 60 * 1000;
+    case "w":
+      return num * 7 * 24 * 60 * 60 * 1000;
+    default:
+      return 7 * 24 * 60 * 60 * 1000;
+  }
+}
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+  const userId = await requireUserId(request);
+  const { projectParam, organizationSlug, envParam, promptSlug } =
+    EnvironmentParamSchema.extend({ promptSlug: z.string() }).parse(params);
+
+  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+  if (!project) throw new Response("Project not found", { status: 404 });
+
+  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+  if (!environment) throw new Response("Environment not found", { status: 404 });
+
+  const url = new URL(request.url);
+  const version = Number(url.searchParams.get("version") ?? "1");
+  const period = url.searchParams.get("period") ?? "7d";
+  const fromTime = url.searchParams.get("from");
+  const toTime = url.searchParams.get("to");
+  const cursorParam = url.searchParams.get("cursor") ?? undefined;
+
+  const periodMs = parsePeriodToMs(period);
+  const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
+  const endTime = toTime ? new Date(toTime) : new Date();
+
+  const presenter = new PromptPresenter(clickhouseClient);
+  const result = await presenter.listGenerations({
+    environmentId: environment.id,
+    promptSlug,
+    promptVersion: version,
+    startTime,
+    endTime,
+    cursor: cursorParam,
+  });
+
+  return json(result satisfies GenerationsResponse);
+};
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 8f7ae61b5d5..8f19d9b337a 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -61,6 +61,7 @@ import { RunTag } from "~/components/runs/v3/RunTag";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
 import { AISpanDetails } from "~/components/runs/v3/ai";
+import { PromptSpanDetails } from "~/components/runs/v3/PromptSpanDetails";
 import { SpanTitle } from "~/components/runs/v3/SpanTitle";
 import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus";
 import {
@@ -1392,12 +1393,17 @@ function SpanEntity({ span }: { span: Span }) {
       return (
         <AISpanDetails
           aiData={span.entity.object}
+          promptVersionData={span.entity.promptVersionData}
           rawProperties={typeof span.properties === "string" ? span.properties : span.properties != null ? JSON.stringify(span.properties, null, 2) : undefined}
         />
       );
     }
+    case "prompt": {
+      return <PromptSpanDetails promptData={span.entity.object} />;
+    }
     default: {
       assertNever(span.entity);
     }
   }
 }
+
diff --git a/apps/webapp/app/services/authorization.server.ts b/apps/webapp/app/services/authorization.server.ts
index 106083fc568..0406c02438e 100644
--- a/apps/webapp/app/services/authorization.server.ts
+++ b/apps/webapp/app/services/authorization.server.ts
@@ -1,6 +1,6 @@
 export type AuthorizationAction = "read" | "write" | string; // Add more actions as needed
 
-const ResourceTypes = ["tasks", "tags", "runs", "batch", "waitpoints", "deployments", "inputStreams", "query"] as const;
+const ResourceTypes = ["tasks", "tags", "runs", "batch", "waitpoints", "deployments", "inputStreams", "query", "prompts"] as const;
 
 export type AuthorizationResources = {
   [key in (typeof ResourceTypes)[number]]?: string | string[];
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index ce3444902d8..141bdc8b09c 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -75,6 +75,8 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
   queues?: string[];
   /** Filter to specific response models */
   responseModels?: string[];
+  /** Filter to specific prompt slugs */
+  promptSlugs?: string[];
   /** History options for saving query to billing/audit */
   history?: {
     /** Where the query originated from */
@@ -130,6 +132,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     taskIdentifiers,
     queues,
     responseModels,
+    promptSlugs,
     history,
     customOrgConcurrencyLimit,
     ...baseOptions
@@ -217,6 +220,8 @@ export async function executeQuery<TOut extends z.ZodSchema>(
       responseModels && responseModels.length > 0
         ? { op: "in", values: responseModels }
         : undefined,
+    prompt_slug:
+      promptSlugs && promptSlugs.length > 0 ? { op: "in", values: promptSlugs } : undefined,
   } satisfies Record<string, WhereClauseCondition | undefined>;
 
   // Compute the effective time range for timeBucket() interval calculation
diff --git a/apps/webapp/app/utils/pathBuilder.ts b/apps/webapp/app/utils/pathBuilder.ts
index d8933b62c28..322224f4142 100644
--- a/apps/webapp/app/utils/pathBuilder.ts
+++ b/apps/webapp/app/utils/pathBuilder.ts
@@ -527,6 +527,25 @@ export function v3LogsPath(
   return `${v3EnvironmentPath(organization, project, environment)}/logs`;
 }
 
+export function v3PromptsPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  environment: EnvironmentForPath
+) {
+  return `${v3EnvironmentPath(organization, project, environment)}/prompts`;
+}
+
+export function v3PromptPath(
+  organization: OrgForPath,
+  project: ProjectForPath,
+  environment: EnvironmentForPath,
+  promptSlug: string,
+  version?: string | number
+) {
+  const base = `${v3PromptsPath(organization, project, environment)}/${promptSlug}`;
+  return version != null ? `${base}?version=${version}` : base;
+}
+
 export function v3ErrorsPath(
   organization: OrgForPath,
   project: ProjectForPath,
diff --git a/apps/webapp/app/v3/eventRepository/clickhouseEventRepository.server.ts b/apps/webapp/app/v3/eventRepository/clickhouseEventRepository.server.ts
index de6d77835d0..72f8f3baa34 100644
--- a/apps/webapp/app/v3/eventRepository/clickhouseEventRepository.server.ts
+++ b/apps/webapp/app/v3/eventRepository/clickhouseEventRepository.server.ts
@@ -284,6 +284,8 @@ export class ClickhouseEventRepository implements IEventRepository {
       ms_to_first_chunk: llmMetrics.msToFirstChunk,
       tokens_per_second: llmMetrics.tokensPerSecond,
       metadata: llmMetrics.metadata,
+      prompt_slug: llmMetrics.promptSlug,
+      prompt_version: llmMetrics.promptVersion,
       start_time: this.#clampAndFormatStartTime(event.startTime.toString()),
       duration: formatClickhouseUnsignedIntegerString(event.duration ?? 0),
     };
diff --git a/apps/webapp/app/v3/eventRepository/eventRepository.types.ts b/apps/webapp/app/v3/eventRepository/eventRepository.types.ts
index fcef0010ee0..bd87c370a03 100644
--- a/apps/webapp/app/v3/eventRepository/eventRepository.types.ts
+++ b/apps/webapp/app/v3/eventRepository/eventRepository.types.ts
@@ -43,6 +43,8 @@ export type LlmMetricsData = {
   msToFirstChunk: number;
   tokensPerSecond: number;
   metadata: Record<string, string>;
+  promptSlug: string;
+  promptVersion: number;
 };
 
 export type CreateEventInput = Omit<
diff --git a/apps/webapp/app/v3/querySchemas.ts b/apps/webapp/app/v3/querySchemas.ts
index 6a6c8758fdb..e380459f717 100644
--- a/apps/webapp/app/v3/querySchemas.ts
+++ b/apps/webapp/app/v3/querySchemas.ts
@@ -638,6 +638,18 @@ export const llmMetricsSchema: TableSchema = {
         coreColumn: true,
       }),
     },
+    trace_id: {
+      name: "trace_id",
+      ...column("String", {
+        description: "The trace ID",
+      }),
+    },
+    span_id: {
+      name: "span_id",
+      ...column("String", {
+        description: "The span ID",
+      }),
+    },
     task_identifier: {
       name: "task_identifier",
       ...column("LowCardinality(String)", {
@@ -821,6 +833,21 @@ export const llmMetricsSchema: TableSchema = {
         customRenderType: "durationNs",
       }),
     },
+    prompt_slug: {
+      name: "prompt_slug",
+      ...column("LowCardinality(String)", {
+        description: "The managed prompt slug used for this LLM call",
+        example: "customer-support",
+        coreColumn: true,
+      }),
+    },
+    prompt_version: {
+      name: "prompt_version",
+      ...column("UInt32", {
+        description: "The managed prompt version number used for this LLM call",
+        example: "3",
+      }),
+    },
     metadata: {
       name: "metadata",
       ...column("Map(LowCardinality(String), String)", {
diff --git a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
index 2938164b74b..4cb471b5c35 100644
--- a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
+++ b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
@@ -2,6 +2,7 @@ import {
   BackgroundWorkerMetadata,
   BackgroundWorkerSourceFileMetadata,
   CreateBackgroundWorkerRequestBody,
+  PromptResource,
   QueueManifest,
   TaskResource,
 } from "@trigger.dev/core/v3";
@@ -216,6 +217,11 @@ export async function createWorkerResources(
 
   // Create the tasks
   await createWorkerTasks(metadata, queues, worker, environment, prisma, tasksToBackgroundFiles);
+
+  // Register prompts
+  if (metadata.prompts && metadata.prompts.length > 0) {
+    await createWorkerPrompts(metadata.prompts, worker, environment, prisma);
+  }
 }
 
 async function createWorkerTasks(
@@ -701,3 +707,129 @@ export async function createBackgroundFiles(
 
   return results;
 }
+
+import { createHash } from "crypto";
+
+function hashContent(content: string): string {
+  return createHash("sha256").update(content).digest("hex").slice(0, 16);
+}
+
+async function createWorkerPrompts(
+  prompts: PromptResource[],
+  worker: BackgroundWorker,
+  environment: AuthenticatedEnvironment,
+  prisma: PrismaClientOrTransaction
+) {
+  for (const promptResource of prompts) {
+    try {
+      // Upsert the Prompt record (identity + schema)
+      const prompt = await prisma.prompt.upsert({
+        where: {
+          projectId_runtimeEnvironmentId_slug: {
+            projectId: worker.projectId,
+            runtimeEnvironmentId: environment.id,
+            slug: promptResource.id,
+          },
+        },
+        create: {
+          friendlyId: generateFriendlyId("prompt"),
+          organizationId: environment.organizationId,
+          projectId: worker.projectId,
+          runtimeEnvironmentId: environment.id,
+          slug: promptResource.id,
+          description: promptResource.description,
+          filePath: promptResource.filePath,
+          exportName: promptResource.exportName,
+          variableSchema: promptResource.variableSchema as any,
+          defaultModel: promptResource.model,
+          defaultConfig: promptResource.config as any,
+        },
+        update: {
+          description: promptResource.description,
+          filePath: promptResource.filePath,
+          exportName: promptResource.exportName,
+          variableSchema: promptResource.variableSchema as any,
+          defaultModel: promptResource.model,
+          defaultConfig: promptResource.config as any,
+        },
+      });
+
+      // Compute content hash for dedup
+      const contentString = promptResource.content ?? "";
+      const contentHash = hashContent(contentString);
+
+      // Find the latest version overall (for version numbering) and the latest
+      // code-sourced version (for content dedup). We compare against the latest
+      // code version specifically so that dashboard edits don't interfere with
+      // dedup — if the code hasn't changed since the last deploy, we skip even
+      // if a dashboard edit happened in between.
+      const latestVersion = await prisma.promptVersion.findFirst({
+        where: { promptId: prompt.id },
+        orderBy: { version: "desc" },
+      });
+
+      const latestCodeVersion = await prisma.promptVersion.findFirst({
+        where: { promptId: prompt.id, source: "code" },
+        orderBy: { version: "desc" },
+      });
+
+      if (latestCodeVersion?.contentHash === contentHash) {
+        // Code content unchanged since last deploy — skip creating a new version
+        continue;
+      }
+
+      const nextVersion = (latestVersion?.version ?? 0) + 1;
+
+      // Remove "latest" label from all existing versions
+      if (latestVersion) {
+        await prisma.$executeRaw`
+          UPDATE "prompt_versions"
+          SET "labels" = array_remove("labels", 'latest')
+          WHERE "promptId" = ${prompt.id} AND 'latest' = ANY("labels")
+        `;
+      }
+
+      // Determine labels for the new version.
+      // Deploys always move "current" to the new code version. If a dashboard
+      // override exists, it sits on top via the "override" label and the API
+      // serves that instead — so "current" movement is safe.
+      const labels = ["latest", "current"];
+
+      // Remove "current" from any existing version
+      await prisma.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_remove("labels", 'current')
+        WHERE "promptId" = ${prompt.id} AND 'current' = ANY("labels")
+      `;
+
+      await prisma.promptVersion.create({
+        data: {
+          promptId: prompt.id,
+          version: nextVersion,
+          textContent: contentString,
+          model: promptResource.model,
+          config: promptResource.config as any,
+          source: "code",
+          contentHash,
+          labels,
+          workerId: worker.id,
+        },
+      });
+
+      logger.debug("Registered prompt version", {
+        promptSlug: promptResource.id,
+        version: nextVersion,
+        labels,
+      });
+    } catch (error) {
+      if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
+        logger.warn("Prompt version already exists", { prompt: promptResource.id });
+      } else {
+        logger.error("Error creating prompt version", {
+          error: error instanceof Error ? error.message : String(error),
+          prompt: promptResource.id,
+        });
+      }
+    }
+  }
+}
diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
new file mode 100644
index 00000000000..15a21d33b17
--- /dev/null
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -0,0 +1,142 @@
+import { createHash } from "crypto";
+import { BaseService, ServiceValidationError } from "./baseService.server";
+
+export class PromptService extends BaseService {
+  async promoteVersion(promptId: string, versionId: string, options?: { sourceGuard?: boolean }) {
+    if (options?.sourceGuard) {
+      const target = await this._prisma.promptVersion.findUnique({
+        where: { id: versionId },
+      });
+      if (!target) {
+        throw new ServiceValidationError("Version not found", 404);
+      }
+      if (target.source !== "code") {
+        throw new ServiceValidationError(
+          "Only code-sourced versions can be promoted. Use the override API instead.",
+          400
+        );
+      }
+    }
+
+    await this.#removeLabel(promptId, "current");
+    await this.#addLabel(versionId, "current");
+  }
+
+  async createOverride(
+    promptId: string,
+    data: {
+      textContent: string;
+      model?: string;
+      commitMessage?: string;
+      source?: string;
+      createdBy?: string;
+    }
+  ) {
+    const contentHash = createHash("sha256").update(data.textContent).digest("hex").slice(0, 16);
+    const nextVersion = await this.#getNextVersionNumber(promptId);
+
+    // Remove any existing override, then create new — wraps in transaction
+    await this._prisma.$transaction(async (tx) => {
+      await tx.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_remove("labels", 'override')
+        WHERE "promptId" = ${promptId} AND 'override' = ANY("labels")
+      `;
+
+      await tx.promptVersion.create({
+        data: {
+          promptId,
+          version: nextVersion,
+          textContent: data.textContent,
+          model: data.model || null,
+          source: data.source || "dashboard",
+          commitMessage: data.commitMessage || null,
+          contentHash,
+          labels: ["override"],
+          createdBy: data.createdBy,
+        },
+      });
+    });
+
+    return { version: nextVersion };
+  }
+
+  async updateOverride(
+    promptId: string,
+    data: {
+      textContent?: string;
+      model?: string;
+      commitMessage?: string;
+    }
+  ) {
+    const overrideVer = await this._prisma.promptVersion.findFirst({
+      where: { promptId, labels: { has: "override" } },
+      orderBy: { version: "desc" },
+    });
+
+    if (!overrideVer) {
+      throw new ServiceValidationError("No active override to update", 400);
+    }
+
+    const contentString = data.textContent ?? overrideVer.textContent ?? "";
+    const contentHash = createHash("sha256").update(contentString).digest("hex").slice(0, 16);
+
+    await this._prisma.promptVersion.update({
+      where: { id: overrideVer.id },
+      data: {
+        textContent: contentString,
+        model: data.model || overrideVer.model,
+        commitMessage: data.commitMessage || overrideVer.commitMessage,
+        contentHash,
+      },
+    });
+  }
+
+  async removeOverride(promptId: string) {
+    await this.#removeLabel(promptId, "override");
+  }
+
+  async reactivateOverride(promptId: string, versionId: string) {
+    const target = await this._prisma.promptVersion.findUnique({
+      where: { id: versionId },
+    });
+
+    if (!target) {
+      throw new ServiceValidationError("Version not found", 404);
+    }
+
+    if (target.source === "code") {
+      throw new ServiceValidationError(
+        "Code-sourced versions cannot be reactivated as overrides",
+        400
+      );
+    }
+
+    await this.#removeLabel(promptId, "override");
+    await this.#addLabel(versionId, "override");
+  }
+
+  async #removeLabel(promptId: string, label: string) {
+    await this._prisma.$executeRaw`
+      UPDATE "prompt_versions"
+      SET "labels" = array_remove("labels", ${label})
+      WHERE "promptId" = ${promptId} AND ${label} = ANY("labels")
+    `;
+  }
+
+  async #addLabel(versionId: string, label: string) {
+    await this._prisma.$executeRaw`
+      UPDATE "prompt_versions"
+      SET "labels" = array_append("labels", ${label})
+      WHERE "id" = ${versionId} AND NOT (${label} = ANY("labels"))
+    `;
+  }
+
+  async #getNextVersionNumber(promptId: string): Promise<number> {
+    const latest = await this._prisma.promptVersion.findFirst({
+      where: { promptId },
+      orderBy: { version: "desc" },
+    });
+    return (latest?.version ?? 0) + 1;
+  }
+}
diff --git a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
index 06458c396f9..bce2aeddecf 100644
--- a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
+++ b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
@@ -39,6 +39,7 @@ function enrichCreatableEvent(event: CreateEventInput): CreateEventInput {
   event.style = enrichStyle(event);
 
   enrichLlmMetrics(event);
+  enrichPromptResolve(event);
 
   return event;
 }
@@ -200,6 +201,8 @@ function enrichLlmMetrics(event: CreateEventInput): void {
     msToFirstChunk,
     tokensPerSecond: avgTokensPerSec,
     metadata,
+    promptSlug: metadata["prompt.slug"] ?? "",
+    promptVersion: parseInt(metadata["prompt.version"] ?? "0", 10) || 0,
   };
 
   event._llmMetrics = llmMetrics;
@@ -421,3 +424,33 @@ function resolveAiProvider(
 
   return undefined;
 }
+
+function enrichPromptResolve(event: CreateEventInput): void {
+  const props = event.properties;
+  if (!props) return;
+
+  const slug = props["prompt.slug"];
+  const version = props["prompt.version"];
+
+  if (typeof slug !== "string") return;
+
+  const style = event.style ?? {};
+  const existingItems =
+    style.accessory && "items" in style.accessory
+      ? (style.accessory.items as Array<{ text: string; icon?: string; variant?: string }>)
+      : [];
+
+  const items = [
+    ...existingItems,
+    {
+      text: `${slug}${typeof version === "number" ? ` v${version}` : ""}`,
+      icon: "tabler-file-text-ai",
+    },
+  ];
+
+  event.style = {
+    ...style,
+    icon: style.icon ?? "tabler-file-text-ai",
+    accessory: { style: "pills" as const, items },
+  };
+}
diff --git a/internal-packages/clickhouse/schema/025_add_prompt_columns_to_llm_metrics_v1.sql b/internal-packages/clickhouse/schema/025_add_prompt_columns_to_llm_metrics_v1.sql
new file mode 100644
index 00000000000..edfea2887ee
--- /dev/null
+++ b/internal-packages/clickhouse/schema/025_add_prompt_columns_to_llm_metrics_v1.sql
@@ -0,0 +1,13 @@
+-- +goose Up
+ALTER TABLE trigger_dev.llm_metrics_v1
+  ADD COLUMN prompt_slug LowCardinality(String) DEFAULT '';
+
+ALTER TABLE trigger_dev.llm_metrics_v1
+  ADD COLUMN prompt_version UInt32 DEFAULT 0;
+
+-- +goose Down
+ALTER TABLE trigger_dev.llm_metrics_v1
+  DROP COLUMN prompt_slug;
+
+ALTER TABLE trigger_dev.llm_metrics_v1
+  DROP COLUMN prompt_version;
diff --git a/internal-packages/clickhouse/src/llmMetrics.ts b/internal-packages/clickhouse/src/llmMetrics.ts
index 1f830b707d8..200979f7b61 100644
--- a/internal-packages/clickhouse/src/llmMetrics.ts
+++ b/internal-packages/clickhouse/src/llmMetrics.ts
@@ -37,6 +37,9 @@ export const LlmMetricsV1Input = z.object({
 
   metadata: z.record(z.string(), z.string()),
 
+  prompt_slug: z.string(),
+  prompt_version: z.number(),
+
   start_time: z.string(),
   duration: z.string(),
 });
diff --git a/internal-packages/database/prisma/migrations/20260317221618_add_prompt_management/migration.sql b/internal-packages/database/prisma/migrations/20260317221618_add_prompt_management/migration.sql
new file mode 100644
index 00000000000..8d2e0bba1e3
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260317221618_add_prompt_management/migration.sql
@@ -0,0 +1,74 @@
+-- CreateTable
+CREATE TABLE "public"."prompts" (
+    "id" TEXT NOT NULL,
+    "slug" TEXT NOT NULL,
+    "description" TEXT,
+    "type" TEXT NOT NULL DEFAULT 'text',
+    "organizationId" TEXT NOT NULL,
+    "projectId" TEXT NOT NULL,
+    "runtimeEnvironmentId" TEXT NOT NULL,
+    "filePath" TEXT,
+    "exportName" TEXT,
+    "variableSchema" JSONB,
+    "defaultModel" TEXT,
+    "defaultConfig" JSONB,
+    "tags" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "archivedAt" TIMESTAMP(3),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "prompts_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "public"."prompt_versions" (
+    "id" TEXT NOT NULL,
+    "version" INTEGER NOT NULL,
+    "promptId" TEXT NOT NULL,
+    "textContent" TEXT,
+    "chatContent" JSONB,
+    "model" TEXT,
+    "config" JSONB,
+    "source" TEXT NOT NULL,
+    "commitMessage" TEXT,
+    "contentHash" TEXT NOT NULL,
+    "labels" TEXT[] DEFAULT ARRAY[]::TEXT[],
+    "workerId" TEXT,
+    "createdBy" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "prompt_versions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "prompts_projectId_idx" ON "public"."prompts"("projectId");
+
+-- CreateIndex
+CREATE INDEX "prompts_runtimeEnvironmentId_idx" ON "public"."prompts"("runtimeEnvironmentId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "prompts_projectId_runtimeEnvironmentId_slug_key" ON "public"."prompts"("projectId", "runtimeEnvironmentId", "slug");
+
+-- CreateIndex
+CREATE INDEX "prompt_versions_promptId_idx" ON "public"."prompt_versions"("promptId");
+
+-- CreateIndex
+CREATE INDEX "prompt_versions_contentHash_idx" ON "public"."prompt_versions"("contentHash");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "prompt_versions_promptId_version_key" ON "public"."prompt_versions"("promptId", "version");
+
+-- AddForeignKey
+ALTER TABLE "public"."prompts" ADD CONSTRAINT "prompts_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "public"."Organization"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."prompts" ADD CONSTRAINT "prompts_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "public"."Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."prompts" ADD CONSTRAINT "prompts_runtimeEnvironmentId_fkey" FOREIGN KEY ("runtimeEnvironmentId") REFERENCES "public"."RuntimeEnvironment"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."prompt_versions" ADD CONSTRAINT "prompt_versions_promptId_fkey" FOREIGN KEY ("promptId") REFERENCES "public"."prompts"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "public"."prompt_versions" ADD CONSTRAINT "prompt_versions_workerId_fkey" FOREIGN KEY ("workerId") REFERENCES "public"."BackgroundWorker"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/internal-packages/database/prisma/migrations/20260318114244_add_prompt_friendly_id/migration.sql b/internal-packages/database/prisma/migrations/20260318114244_add_prompt_friendly_id/migration.sql
new file mode 100644
index 00000000000..2a2ca830ef9
--- /dev/null
+++ b/internal-packages/database/prisma/migrations/20260318114244_add_prompt_friendly_id/migration.sql
@@ -0,0 +1,5 @@
+-- AlterTable
+ALTER TABLE "public"."prompts" ADD COLUMN "friendly_id" TEXT NOT NULL;
+
+-- CreateIndex
+CREATE UNIQUE INDEX "prompts_friendly_id_key" ON "public"."prompts"("friendly_id");
diff --git a/internal-packages/database/prisma/schema.prisma b/internal-packages/database/prisma/schema.prisma
index 9e91fc70f14..677a4ab4136 100644
--- a/internal-packages/database/prisma/schema.prisma
+++ b/internal-packages/database/prisma/schema.prisma
@@ -228,6 +228,7 @@ model Organization {
   githubAppInstallations   GithubAppInstallation[]
   customerQueries          CustomerQuery[]
   metricsDashboards        MetricsDashboard[]
+  prompts                  Prompt[]
 }
 
 model OrgMember {
@@ -346,6 +347,7 @@ model RuntimeEnvironment {
   waitpointTags        WaitpointTag[]
   BulkActionGroup      BulkActionGroup[]
   customerQueries      CustomerQuery[]
+  prompts              Prompt[]
 
   @@unique([projectId, slug, orgMemberId])
   @@unique([projectId, shortcode])
@@ -418,6 +420,7 @@ model Project {
   taskScheduleInstances TaskScheduleInstance[]
   metricsDashboards     MetricsDashboard[]
   llmModels             LlmModel[]
+  prompts               Prompt[]
 }
 
 enum ProjectVersion {
@@ -492,11 +495,12 @@ model BackgroundWorker {
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
 
-  tasks      BackgroundWorkerTask[]
-  attempts   TaskRunAttempt[]
-  lockedRuns TaskRun[]
-  files      BackgroundWorkerFile[]
-  queues     TaskQueue[]
+  tasks          BackgroundWorkerTask[]
+  attempts       TaskRunAttempt[]
+  lockedRuns     TaskRun[]
+  files          BackgroundWorkerFile[]
+  queues         TaskQueue[]
+  promptVersions PromptVersion[]
 
   deployment WorkerDeployment?
 
@@ -532,6 +536,73 @@ model BackgroundWorkerFile {
   @@unique([projectId, contentHash])
 }
 
+model Prompt {
+  id         String @id @default(cuid())
+  friendlyId String @unique @map("friendly_id")
+  slug        String
+  description String?
+  type        String  @default("text") // "text" | "chat"
+
+  organization   Organization       @relation(fields: [organizationId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  organizationId String
+
+  project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  projectId String
+
+  runtimeEnvironment   RuntimeEnvironment @relation(fields: [runtimeEnvironmentId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  runtimeEnvironmentId String
+
+  filePath       String?
+  exportName     String?
+  variableSchema Json?
+  defaultModel   String?
+  defaultConfig  Json?
+
+  tags       String[] @default([])
+  archivedAt DateTime?
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  versions PromptVersion[]
+
+  @@unique([projectId, runtimeEnvironmentId, slug])
+  @@index([projectId])
+  @@index([runtimeEnvironmentId])
+  @@map("prompts")
+}
+
+model PromptVersion {
+  id      String @id @default(cuid())
+  version Int
+
+  prompt   Prompt @relation(fields: [promptId], references: [id], onDelete: Cascade, onUpdate: Cascade)
+  promptId String
+
+  textContent String?
+  chatContent Json?
+
+  model  String?
+  config Json?
+
+  source        String // "deploy" | "dashboard" | "api"
+  commitMessage String?
+  contentHash   String
+
+  labels String[] @default([])
+
+  worker   BackgroundWorker? @relation(fields: [workerId], references: [id])
+  workerId String?
+
+  createdBy String?
+  createdAt DateTime @default(now())
+
+  @@unique([promptId, version])
+  @@index([promptId])
+  @@index([contentHash])
+  @@map("prompt_versions")
+}
+
 model BackgroundWorkerTask {
   id   String @id @default(cuid())
   slug String
diff --git a/package.json b/package.json
index 5ddec1798c7..6777bef721b 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,8 @@
       "@kubernetes/client-node@1.0.0": "patches/@kubernetes__client-node@1.0.0.patch",
       "@sentry/remix@9.46.0": "patches/@sentry__remix@9.46.0.patch",
       "@upstash/ratelimit@1.1.3": "patches/@upstash__ratelimit.patch",
-      "antlr4ts@0.5.0-alpha.4": "patches/antlr4ts@0.5.0-alpha.4.patch"
+      "antlr4ts@0.5.0-alpha.4": "patches/antlr4ts@0.5.0-alpha.4.patch",
+      "@window-splitter/state@0.4.1": "patches/@window-splitter__state@0.4.1.patch"
     },
     "overrides": {
       "typescript": "5.5.4",
diff --git a/packages/cli-v3/src/dev/devSupervisor.ts b/packages/cli-v3/src/dev/devSupervisor.ts
index ac818b5bf8e..59b2d2a473b 100644
--- a/packages/cli-v3/src/dev/devSupervisor.ts
+++ b/packages/cli-v3/src/dev/devSupervisor.ts
@@ -351,6 +351,7 @@ class DevSupervisor implements WorkerRuntime {
         packageVersion: manifest.packageVersion,
         cliPackageVersion: manifest.cliPackageVersion,
         tasks: backgroundWorker.manifest.tasks,
+        prompts: backgroundWorker.manifest.prompts,
         queues: backgroundWorker.manifest.queues,
         contentHash: manifest.contentHash,
         sourceFiles,
diff --git a/packages/cli-v3/src/entryPoints/dev-index-worker.ts b/packages/cli-v3/src/entryPoints/dev-index-worker.ts
index da5c6ee7508..3328f553ca6 100644
--- a/packages/cli-v3/src/entryPoints/dev-index-worker.ts
+++ b/packages/cli-v3/src/entryPoints/dev-index-worker.ts
@@ -3,6 +3,7 @@ import {
   type HandleErrorFunction,
   indexerToWorkerMessages,
   resourceCatalog,
+  type PromptManifest,
   type TaskManifest,
   TriggerConfig,
 } from "@trigger.dev/core/v3";
@@ -153,6 +154,7 @@ await sendMessageInCatalog(
   {
     manifest: {
       tasks,
+      prompts: convertPromptSchemasToJsonSchemas(resourceCatalog.listPromptManifests()),
       queues: resourceCatalog.listQueueManifests(),
       configPath: buildManifest.configPath,
       runtime: buildManifest.runtime,
@@ -192,6 +194,23 @@ await new Promise<void>((resolve) => {
   }, 10);
 });
 
+function convertPromptSchemasToJsonSchemas(prompts: PromptManifest[]): PromptManifest[] {
+  return prompts.map((prompt) => {
+    const schema = resourceCatalog.getPromptSchema(prompt.id);
+
+    if (schema) {
+      try {
+        const result = schemaToJsonSchema(schema);
+        return { ...prompt, variableSchema: result?.jsonSchema };
+      } catch {
+        return prompt;
+      }
+    }
+
+    return prompt;
+  });
+}
+
 async function convertSchemasToJsonSchemas(tasks: TaskManifest[]): Promise<TaskManifest[]> {
   const convertedTasks = tasks.map((task) => {
     const schema = resourceCatalog.getTaskSchema(task.id);
diff --git a/packages/cli-v3/src/entryPoints/managed-index-worker.ts b/packages/cli-v3/src/entryPoints/managed-index-worker.ts
index 5ff9f1b62ed..f300e7ac716 100644
--- a/packages/cli-v3/src/entryPoints/managed-index-worker.ts
+++ b/packages/cli-v3/src/entryPoints/managed-index-worker.ts
@@ -3,6 +3,7 @@ import {
   type HandleErrorFunction,
   indexerToWorkerMessages,
   resourceCatalog,
+  type PromptManifest,
   type TaskManifest,
   TriggerConfig,
 } from "@trigger.dev/core/v3";
@@ -155,6 +156,7 @@ await sendMessageInCatalog(
   {
     manifest: {
       tasks,
+      prompts: convertPromptSchemasToJsonSchemas(resourceCatalog.listPromptManifests()),
       queues: resourceCatalog.listQueueManifests(),
       configPath: buildManifest.configPath,
       runtime: buildManifest.runtime,
@@ -200,6 +202,23 @@ await new Promise<void>((resolve) => {
   }, 10);
 });
 
+function convertPromptSchemasToJsonSchemas(prompts: PromptManifest[]): PromptManifest[] {
+  return prompts.map((prompt) => {
+    const schema = resourceCatalog.getPromptSchema(prompt.id);
+
+    if (schema) {
+      try {
+        const result = schemaToJsonSchema(schema);
+        return { ...prompt, variableSchema: result?.jsonSchema };
+      } catch {
+        return prompt;
+      }
+    }
+
+    return prompt;
+  });
+}
+
 async function convertSchemasToJsonSchemas(tasks: TaskManifest[]): Promise<TaskManifest[]> {
   const convertedTasks = tasks.map((task) => {
     const schema = resourceCatalog.getTaskSchema(task.id);
diff --git a/packages/cli-v3/src/mcp/config.ts b/packages/cli-v3/src/mcp/config.ts
index c3615420ad5..bab3473a145 100644
--- a/packages/cli-v3/src/mcp/config.ts
+++ b/packages/cli-v3/src/mcp/config.ts
@@ -165,4 +165,46 @@ export const toolsMetadata = {
     description:
       "Check the status of the dev server and view recent output. Shows whether it is stopped, starting, ready, or has errors, along with recent log lines.",
   },
+  list_prompts: {
+    name: "list_prompts",
+    title: "List Prompts",
+    description:
+      "List all managed prompts in the project environment. Shows slug, current version, override status, and version count.",
+  },
+  get_prompt_versions: {
+    name: "get_prompt_versions",
+    title: "Get Prompt Versions",
+    description:
+      "List all versions for a specific prompt. Shows version number, labels (current, override, latest), source (code or dashboard), model, and content.",
+  },
+  promote_prompt_version: {
+    name: "promote_prompt_version",
+    title: "Promote Prompt Version",
+    description:
+      "Promote a prompt version to be the current active version. Only code-sourced versions can be promoted — dashboard overrides must use the override tools instead.",
+  },
+  create_prompt_override: {
+    name: "create_prompt_override",
+    title: "Create Prompt Override",
+    description:
+      "Create a dashboard override for a prompt. The override takes precedence over the current code version when resolving the prompt. Provide the full text content for the override.",
+  },
+  update_prompt_override: {
+    name: "update_prompt_override",
+    title: "Update Prompt Override",
+    description:
+      "Update the active dashboard override for a prompt. Only works if an override is currently active.",
+  },
+  remove_prompt_override: {
+    name: "remove_prompt_override",
+    title: "Remove Prompt Override",
+    description:
+      "Remove the active dashboard override for a prompt, reverting to the current code version.",
+  },
+  reactivate_prompt_override: {
+    name: "reactivate_prompt_override",
+    title: "Reactivate Prompt Override",
+    description:
+      "Reactivate a previous dashboard-sourced version as the active override. Use get_prompt_versions to find dashboard versions that can be reactivated.",
+  },
 };
diff --git a/packages/cli-v3/src/mcp/tools.ts b/packages/cli-v3/src/mcp/tools.ts
index 00f3fc36c5a..ca7b514dba0 100644
--- a/packages/cli-v3/src/mcp/tools.ts
+++ b/packages/cli-v3/src/mcp/tools.ts
@@ -19,6 +19,15 @@ import {
   waitForRunToCompleteTool,
 } from "./tools/runs.js";
 import { getCurrentWorker, getTaskSchemaTool, triggerTaskTool } from "./tools/tasks.js";
+import {
+  listPromptsTool,
+  getPromptVersionsTool,
+  promotePromptVersionTool,
+  createPromptOverrideTool,
+  updatePromptOverrideTool,
+  removePromptOverrideTool,
+  reactivatePromptOverrideTool,
+} from "./tools/prompts.js";
 import { respondWithError } from "./utils.js";
 
 /** Tool names that perform write/mutating operations. */
@@ -28,6 +37,11 @@ const WRITE_TOOLS = new Set([
   cancelRunTool.name,
   createProjectInOrgTool.name,
   initializeProjectTool.name,
+  promotePromptVersionTool.name,
+  createPromptOverrideTool.name,
+  updatePromptOverrideTool.name,
+  removePromptOverrideTool.name,
+  reactivatePromptOverrideTool.name,
 ]);
 
 export function registerTools(context: McpContext) {
@@ -57,6 +71,13 @@ export function registerTools(context: McpContext) {
     startDevServerTool,
     stopDevServerTool,
     devServerStatusTool,
+    listPromptsTool,
+    getPromptVersionsTool,
+    promotePromptVersionTool,
+    createPromptOverrideTool,
+    updatePromptOverrideTool,
+    removePromptOverrideTool,
+    reactivatePromptOverrideTool,
   ];
 
   for (const tool of tools) {
diff --git a/packages/cli-v3/src/mcp/tools/prompts.ts b/packages/cli-v3/src/mcp/tools/prompts.ts
new file mode 100644
index 00000000000..5ab67664bd9
--- /dev/null
+++ b/packages/cli-v3/src/mcp/tools/prompts.ts
@@ -0,0 +1,386 @@
+import { z } from "zod";
+import { toolsMetadata } from "../config.js";
+import { CommonProjectsInput } from "../schemas.js";
+import { respondWithError, toolHandler } from "../utils.js";
+
+// ---------------------------------------------------------------------------
+// Input schemas
+// ---------------------------------------------------------------------------
+
+const ListPromptsInput = CommonProjectsInput;
+
+const PromptSlugInput = CommonProjectsInput.extend({
+  slug: z.string().describe("The prompt slug"),
+});
+
+const PromoteInput = CommonProjectsInput.extend({
+  slug: z.string().describe("The prompt slug"),
+  version: z.number().int().positive().describe("The version number to promote to current"),
+});
+
+const CreateOverrideInput = CommonProjectsInput.extend({
+  slug: z.string().describe("The prompt slug"),
+  textContent: z.string().describe("The full text content for the override"),
+  model: z.string().optional().describe("Optional model override"),
+  commitMessage: z.string().optional().describe("Optional commit message describing the change"),
+});
+
+const UpdateOverrideInput = CommonProjectsInput.extend({
+  slug: z.string().describe("The prompt slug"),
+  textContent: z.string().optional().describe("Updated text content"),
+  model: z.string().optional().describe("Updated model"),
+  commitMessage: z.string().optional().describe("Commit message describing the change"),
+});
+
+const RemoveOverrideInput = PromptSlugInput;
+
+const ReactivateOverrideInput = CommonProjectsInput.extend({
+  slug: z.string().describe("The prompt slug"),
+  version: z
+    .number()
+    .int()
+    .positive()
+    .describe("The dashboard-sourced version number to reactivate as override"),
+});
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+async function fetchPromptApi(
+  apiClient: { fetchClient: typeof fetch; baseUrl: string },
+  path: string,
+  options?: RequestInit
+) {
+  const res = await apiClient.fetchClient(`${apiClient.baseUrl}/api/v1/prompts${path}`, options);
+  const data = await res.json();
+  if (!res.ok) {
+    throw new Error(data.error ?? `API error ${res.status}`);
+  }
+  return data;
+}
+
+// ---------------------------------------------------------------------------
+// Read tools
+// ---------------------------------------------------------------------------
+
+export const listPromptsTool = {
+  name: toolsMetadata.list_prompts.name,
+  title: toolsMetadata.list_prompts.title,
+  description: toolsMetadata.list_prompts.description,
+  inputSchema: ListPromptsInput.shape,
+  handler: toolHandler(ListPromptsInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["read:prompts"],
+      branch: input.branch,
+    });
+
+    const result = await fetchPromptApi(apiClient, "");
+
+    const prompts = result.data as Array<{
+      slug: string;
+      friendlyId: string;
+      description?: string;
+      defaultModel?: string;
+      currentVersion: number | null;
+      hasOverride: boolean;
+      versionCount: number;
+      tags: string[];
+    }>;
+
+    if (prompts.length === 0) {
+      return { content: [{ type: "text" as const, text: "No prompts found." }] };
+    }
+
+    const lines = ["## Prompts\n"];
+    for (const p of prompts) {
+      const status = p.hasOverride ? " (override active)" : "";
+      const version = p.currentVersion != null ? `v${p.currentVersion}` : "no current";
+      lines.push(`- **${p.slug}** — ${version}${status} · ${p.versionCount} versions`);
+      if (p.description) lines.push(`  ${p.description}`);
+      if (p.defaultModel) lines.push(`  Model: ${p.defaultModel}`);
+    }
+
+    return { content: [{ type: "text" as const, text: lines.join("\n") }] };
+  }),
+};
+
+export const getPromptVersionsTool = {
+  name: toolsMetadata.get_prompt_versions.name,
+  title: toolsMetadata.get_prompt_versions.title,
+  description: toolsMetadata.get_prompt_versions.description,
+  inputSchema: PromptSlugInput.shape,
+  handler: toolHandler(PromptSlugInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["read:prompts"],
+      branch: input.branch,
+    });
+
+    const result = await fetchPromptApi(apiClient, `/${input.slug}/versions`);
+
+    const versions = result.data as Array<{
+      version: number;
+      labels: string[];
+      source: string;
+      model?: string;
+      textContent?: string;
+      commitMessage?: string;
+      createdAt: string;
+    }>;
+
+    if (versions.length === 0) {
+      return { content: [{ type: "text" as const, text: "No versions found." }] };
+    }
+
+    const lines = [`## Versions for "${input.slug}"\n`];
+    for (const v of versions) {
+      const labels = v.labels.length > 0 ? ` [${v.labels.join(", ")}]` : "";
+      const model = v.model ? ` · ${v.model}` : "";
+      const msg = v.commitMessage ? ` — "${v.commitMessage}"` : "";
+      lines.push(`- **v${v.version}**${labels} (${v.source})${model}${msg}`);
+      if (v.textContent) {
+        const preview =
+          v.textContent.length > 120 ? v.textContent.slice(0, 120) + "..." : v.textContent;
+        lines.push(`  Content: ${preview}`);
+      }
+    }
+
+    return { content: [{ type: "text" as const, text: lines.join("\n") }] };
+  }),
+};
+
+// ---------------------------------------------------------------------------
+// Write tools
+// ---------------------------------------------------------------------------
+
+export const promotePromptVersionTool = {
+  name: toolsMetadata.promote_prompt_version.name,
+  title: toolsMetadata.promote_prompt_version.title,
+  description: toolsMetadata.promote_prompt_version.description,
+  inputSchema: PromoteInput.shape,
+  handler: toolHandler(PromoteInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["admin"],
+      branch: input.branch,
+    });
+
+    await fetchPromptApi(apiClient, `/${input.slug}/promote`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ version: input.version }),
+    });
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `Promoted "${input.slug}" v${input.version} to current.`,
+        },
+      ],
+    };
+  }),
+};
+
+export const createPromptOverrideTool = {
+  name: toolsMetadata.create_prompt_override.name,
+  title: toolsMetadata.create_prompt_override.title,
+  description: toolsMetadata.create_prompt_override.description,
+  inputSchema: CreateOverrideInput.shape,
+  handler: toolHandler(CreateOverrideInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["admin"],
+      branch: input.branch,
+    });
+
+    const result = await fetchPromptApi(apiClient, `/${input.slug}/override`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        textContent: input.textContent,
+        model: input.model,
+        commitMessage: input.commitMessage,
+        source: "mcp",
+      }),
+    });
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `Created override for "${input.slug}" as v${result.version}.`,
+        },
+      ],
+    };
+  }),
+};
+
+export const updatePromptOverrideTool = {
+  name: toolsMetadata.update_prompt_override.name,
+  title: toolsMetadata.update_prompt_override.title,
+  description: toolsMetadata.update_prompt_override.description,
+  inputSchema: UpdateOverrideInput.shape,
+  handler: toolHandler(UpdateOverrideInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["admin"],
+      branch: input.branch,
+    });
+
+    await fetchPromptApi(apiClient, `/${input.slug}/override`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        textContent: input.textContent,
+        model: input.model,
+        commitMessage: input.commitMessage,
+      }),
+    });
+
+    return {
+      content: [
+        { type: "text" as const, text: `Updated override for "${input.slug}".` },
+      ],
+    };
+  }),
+};
+
+export const removePromptOverrideTool = {
+  name: toolsMetadata.remove_prompt_override.name,
+  title: toolsMetadata.remove_prompt_override.title,
+  description: toolsMetadata.remove_prompt_override.description,
+  inputSchema: RemoveOverrideInput.shape,
+  handler: toolHandler(RemoveOverrideInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["admin"],
+      branch: input.branch,
+    });
+
+    await fetchPromptApi(apiClient, `/${input.slug}/override`, {
+      method: "DELETE",
+    });
+
+    return {
+      content: [
+        { type: "text" as const, text: `Removed override for "${input.slug}".` },
+      ],
+    };
+  }),
+};
+
+export const reactivatePromptOverrideTool = {
+  name: toolsMetadata.reactivate_prompt_override.name,
+  title: toolsMetadata.reactivate_prompt_override.title,
+  description: toolsMetadata.reactivate_prompt_override.description,
+  inputSchema: ReactivateOverrideInput.shape,
+  handler: toolHandler(ReactivateOverrideInput.shape, async (input, { ctx }) => {
+    if (ctx.options.devOnly && input.environment !== "dev") {
+      return respondWithError(
+        `This MCP server is only available for the dev environment. You tried to access the ${input.environment} environment.`
+      );
+    }
+
+    const projectRef = await ctx.getProjectRef({
+      projectRef: input.projectRef,
+      cwd: input.configPath,
+    });
+
+    const apiClient = await ctx.getApiClient({
+      projectRef,
+      environment: input.environment,
+      scopes: ["admin"],
+      branch: input.branch,
+    });
+
+    await fetchPromptApi(apiClient, `/${input.slug}/override/reactivate`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ version: input.version }),
+    });
+
+    return {
+      content: [
+        {
+          type: "text" as const,
+          text: `Reactivated v${input.version} as override for "${input.slug}".`,
+        },
+      ],
+    };
+  }),
+};
diff --git a/packages/core/src/v3/apiClient/index.ts b/packages/core/src/v3/apiClient/index.ts
index 3aa258c40bc..7699fdf00c2 100644
--- a/packages/core/src/v3/apiClient/index.ts
+++ b/packages/core/src/v3/apiClient/index.ts
@@ -42,6 +42,8 @@ import {
   ResetIdempotencyKeyResponse,
   RetrieveBatchV2Response,
   RetrieveQueueParam,
+  ResolvePromptRequestBody,
+  ResolvePromptResponseBody,
   RetrieveRunResponse,
   RetrieveRunTraceResponseBody,
   ScheduleObject,
@@ -1568,6 +1570,23 @@ export class ApiClient {
     return headers;
   }
 
+  resolvePrompt(
+    slug: string,
+    body: ResolvePromptRequestBody,
+    requestOptions?: ZodFetchOptions
+  ) {
+    return zodfetch(
+      ResolvePromptResponseBody,
+      `${this.baseUrl}/api/v1/prompts/${slug}`,
+      {
+        method: "POST",
+        headers: this.#getHeaders(false),
+        body: JSON.stringify(body),
+      },
+      mergeRequestOptions(this.defaultRequestOptions, requestOptions)
+    );
+  }
+
   #getRealtimeHeaders() {
     let headers: Record<string, string> = {
       Authorization: `Bearer ${this.accessToken}`,
diff --git a/packages/core/src/v3/resource-catalog/catalog.ts b/packages/core/src/v3/resource-catalog/catalog.ts
index 9ad14dd8484..5b3ab023639 100644
--- a/packages/core/src/v3/resource-catalog/catalog.ts
+++ b/packages/core/src/v3/resource-catalog/catalog.ts
@@ -1,5 +1,5 @@
-import { QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
-import { TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
+import { PromptManifest, QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
+import { PromptMetadataWithFunctions, TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
 
 export interface ResourceCatalog {
   setCurrentFileContext(filePath: string, entryPoint: string): void;
@@ -14,4 +14,8 @@ export interface ResourceCatalog {
   registerQueueMetadata(queue: QueueManifest): void;
   listQueueManifests(): Array<QueueManifest>;
   getTaskSchema(id: string): TaskSchema | undefined;
+  registerPromptMetadata(prompt: PromptMetadataWithFunctions): void;
+  listPromptManifests(): Array<PromptManifest>;
+  getPrompt(id: string): PromptMetadataWithFunctions | undefined;
+  getPromptSchema(id: string): TaskSchema | undefined;
 }
diff --git a/packages/core/src/v3/resource-catalog/index.ts b/packages/core/src/v3/resource-catalog/index.ts
index a564648fcc3..9ce7dee64cf 100644
--- a/packages/core/src/v3/resource-catalog/index.ts
+++ b/packages/core/src/v3/resource-catalog/index.ts
@@ -1,7 +1,7 @@
 const API_NAME = "resource-catalog";
 
-import { QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
-import { TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
+import { PromptManifest, QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
+import { PromptMetadataWithFunctions, TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
 import { getGlobal, registerGlobal, unregisterGlobal } from "../utils/globals.js";
 import { type ResourceCatalog } from "./catalog.js";
 import { NoopResourceCatalog } from "./noopResourceCatalog.js";
@@ -77,6 +77,22 @@ export class ResourceCatalogAPI {
     return this.#getCatalog().listQueueManifests();
   }
 
+  public registerPromptMetadata(prompt: PromptMetadataWithFunctions): void {
+    this.#getCatalog().registerPromptMetadata(prompt);
+  }
+
+  public listPromptManifests(): Array<PromptManifest> {
+    return this.#getCatalog().listPromptManifests();
+  }
+
+  public getPrompt(id: string): PromptMetadataWithFunctions | undefined {
+    return this.#getCatalog().getPrompt(id);
+  }
+
+  public getPromptSchema(id: string): TaskSchema | undefined {
+    return this.#getCatalog().getPromptSchema(id);
+  }
+
   #getCatalog(): ResourceCatalog {
     return getGlobal(API_NAME) ?? NOOP_RESOURCE_CATALOG;
   }
diff --git a/packages/core/src/v3/resource-catalog/noopResourceCatalog.ts b/packages/core/src/v3/resource-catalog/noopResourceCatalog.ts
index 53a953393aa..8f77544f05c 100644
--- a/packages/core/src/v3/resource-catalog/noopResourceCatalog.ts
+++ b/packages/core/src/v3/resource-catalog/noopResourceCatalog.ts
@@ -1,5 +1,5 @@
-import { QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
-import { TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
+import { PromptManifest, QueueManifest, TaskManifest, WorkerManifest } from "../schemas/index.js";
+import { type PromptMetadataWithFunctions, type TaskMetadataWithFunctions, type TaskSchema } from "../types/index.js";
 import { ResourceCatalog } from "./catalog.js";
 
 export class NoopResourceCatalog implements ResourceCatalog {
@@ -54,4 +54,20 @@ export class NoopResourceCatalog implements ResourceCatalog {
   listQueueManifests(): Array<QueueManifest> {
     return [];
   }
+
+  registerPromptMetadata(prompt: PromptMetadataWithFunctions): void {
+    // noop
+  }
+
+  listPromptManifests(): Array<PromptManifest> {
+    return [];
+  }
+
+  getPrompt(id: string): PromptMetadataWithFunctions | undefined {
+    return undefined;
+  }
+
+  getPromptSchema(id: string): TaskSchema | undefined {
+    return undefined;
+  }
 }
diff --git a/packages/core/src/v3/resource-catalog/standardResourceCatalog.ts b/packages/core/src/v3/resource-catalog/standardResourceCatalog.ts
index 3d2f1cadfd3..ea134a45663 100644
--- a/packages/core/src/v3/resource-catalog/standardResourceCatalog.ts
+++ b/packages/core/src/v3/resource-catalog/standardResourceCatalog.ts
@@ -1,11 +1,13 @@
 import {
+  PromptManifest,
+  PromptMetadata,
   TaskFileMetadata,
   TaskMetadata,
   TaskManifest,
   WorkerManifest,
   QueueManifest,
 } from "../schemas/index.js";
-import { TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
+import { PromptMetadataWithFunctions, TaskMetadataWithFunctions, TaskSchema } from "../types/index.js";
 import { ResourceCatalog } from "./catalog.js";
 
 export class StandardResourceCatalog implements ResourceCatalog {
@@ -13,6 +15,10 @@ export class StandardResourceCatalog implements ResourceCatalog {
   private _taskMetadata: Map<string, TaskMetadata> = new Map();
   private _taskFunctions: Map<string, TaskMetadataWithFunctions["fns"]> = new Map();
   private _taskFileMetadata: Map<string, TaskFileMetadata> = new Map();
+  private _promptMetadata: Map<string, PromptMetadata> = new Map();
+  private _promptFunctions: Map<string, PromptMetadataWithFunctions["fns"]> = new Map();
+  private _promptFileMetadata: Map<string, TaskFileMetadata> = new Map();
+  private _promptSchemas: Map<string, TaskSchema> = new Map();
   private _currentFileContext?: Omit<TaskFileMetadata, "exportName">;
   private _queueMetadata: Map<string, QueueManifest> = new Map();
 
@@ -165,6 +171,68 @@ export class StandardResourceCatalog implements ResourceCatalog {
     return this._taskMetadata.has(id);
   }
 
+  registerPromptMetadata(prompt: PromptMetadataWithFunctions): void {
+    if (!this._currentFileContext) {
+      return;
+    }
+
+    const { fns, schema, ...metadata } = prompt;
+
+    if (!prompt.id) {
+      return;
+    }
+
+    this._promptFileMetadata.set(prompt.id, {
+      ...this._currentFileContext,
+    });
+
+    this._promptMetadata.set(prompt.id, metadata);
+    this._promptFunctions.set(prompt.id, fns);
+
+    if (schema) {
+      this._promptSchemas.set(prompt.id, schema);
+    }
+  }
+
+  getPromptSchema(id: string): TaskSchema | undefined {
+    return this._promptSchemas.get(id);
+  }
+
+  listPromptManifests(): Array<PromptManifest> {
+    const result: Array<PromptManifest> = [];
+
+    for (const [id, metadata] of this._promptMetadata) {
+      const fileMetadata = this._promptFileMetadata.get(id);
+
+      if (!fileMetadata) {
+        continue;
+      }
+
+      result.push({
+        ...metadata,
+        ...fileMetadata,
+      });
+    }
+
+    return result;
+  }
+
+  getPrompt(id: string): PromptMetadataWithFunctions | undefined {
+    const metadata = this._promptMetadata.get(id);
+    const fileMetadata = this._promptFileMetadata.get(id);
+    const fns = this._promptFunctions.get(id);
+
+    if (!metadata || !fns || !fileMetadata) {
+      return undefined;
+    }
+
+    return {
+      ...metadata,
+      ...fileMetadata,
+      fns,
+    };
+  }
+
   disable() {
     // noop
   }
diff --git a/packages/core/src/v3/schemas/api.ts b/packages/core/src/v3/schemas/api.ts
index 376392ddd14..b1186a6d209 100644
--- a/packages/core/src/v3/schemas/api.ts
+++ b/packages/core/src/v3/schemas/api.ts
@@ -1639,3 +1639,24 @@ export const SendInputStreamResponseBody = z.object({
   ok: z.boolean(),
 });
 export type SendInputStreamResponseBody = z.infer<typeof SendInputStreamResponseBody>;
+
+export const ResolvePromptRequestBody = z.object({
+  variables: z.record(z.unknown()).default({}),
+  label: z.string().optional(),
+  version: z.number().optional(),
+});
+export type ResolvePromptRequestBody = z.infer<typeof ResolvePromptRequestBody>;
+
+export const ResolvePromptResponseBody = z.object({
+  data: z.object({
+    promptId: z.string(),
+    slug: z.string(),
+    version: z.number(),
+    labels: z.array(z.string()),
+    template: z.string().optional(),
+    text: z.string().optional(),
+    model: z.string().optional().nullable(),
+    config: z.record(z.unknown()).optional().nullable(),
+  }),
+});
+export type ResolvePromptResponseBody = z.infer<typeof ResolvePromptResponseBody>;
diff --git a/packages/core/src/v3/schemas/build.ts b/packages/core/src/v3/schemas/build.ts
index 8eb97f0f358..bda5efb0ad9 100644
--- a/packages/core/src/v3/schemas/build.ts
+++ b/packages/core/src/v3/schemas/build.ts
@@ -1,6 +1,6 @@
 import { z } from "zod";
 import { ConfigManifest } from "./config.js";
-import { QueueManifest, TaskFile, TaskManifest } from "./schemas.js";
+import { PromptManifest, QueueManifest, TaskFile, TaskManifest } from "./schemas.js";
 
 export const BuildExternal = z.object({
   name: z.string(),
@@ -86,6 +86,7 @@ export type IndexMessage = z.infer<typeof IndexMessage>;
 export const WorkerManifest = z.object({
   configPath: z.string(),
   tasks: TaskManifest.array(),
+  prompts: PromptManifest.array().optional(),
   queues: QueueManifest.array().optional(),
   workerEntryPoint: z.string(),
   controllerEntryPoint: z.string().optional(),
diff --git a/packages/core/src/v3/schemas/resources.ts b/packages/core/src/v3/schemas/resources.ts
index 08764906ede..9a9a86e4e91 100644
--- a/packages/core/src/v3/schemas/resources.ts
+++ b/packages/core/src/v3/schemas/resources.ts
@@ -28,11 +28,29 @@ export const BackgroundWorkerSourceFileMetadata = z.object({
 
 export type BackgroundWorkerSourceFileMetadata = z.infer<typeof BackgroundWorkerSourceFileMetadata>;
 
+export const PromptResource = z.object({
+  id: z.string(),
+  description: z.string().optional(),
+  filePath: z.string(),
+  exportName: z.string().optional(),
+  /** The default template content */
+  content: z.string().optional(),
+  /** Default model identifier */
+  model: z.string().optional(),
+  /** Default model config (temperature, maxTokens, etc.) */
+  config: z.record(z.unknown()).optional(),
+  /** JSONSchema7 for template variables */
+  variableSchema: z.unknown().optional(),
+});
+
+export type PromptResource = z.infer<typeof PromptResource>;
+
 export const BackgroundWorkerMetadata = z.object({
   packageVersion: z.string(),
   contentHash: z.string(),
   cliPackageVersion: z.string().optional(),
   tasks: z.array(TaskResource),
+  prompts: z.array(PromptResource).optional(),
   queues: z.array(QueueManifest).optional(),
   sourceFiles: z.array(BackgroundWorkerSourceFileMetadata).optional(),
   runtime: z.string().optional(),
diff --git a/packages/core/src/v3/schemas/schemas.ts b/packages/core/src/v3/schemas/schemas.ts
index 233068c0b7b..2d79d017426 100644
--- a/packages/core/src/v3/schemas/schemas.ts
+++ b/packages/core/src/v3/schemas/schemas.ts
@@ -220,6 +220,26 @@ export const TaskManifest = z.object({
 
 export type TaskManifest = z.infer<typeof TaskManifest>;
 
+const promptMetadata = {
+  id: z.string(),
+  description: z.string().optional(),
+  content: z.string().optional(),
+  model: z.string().optional(),
+  config: z.record(z.unknown()).optional(),
+  variableSchema: z.unknown().optional(),
+};
+
+export const PromptMetadata = z.object(promptMetadata);
+
+export type PromptMetadata = z.infer<typeof PromptMetadata>;
+
+export const PromptManifest = z.object({
+  ...promptMetadata,
+  ...taskFileMetadata,
+});
+
+export type PromptManifest = z.infer<typeof PromptManifest>;
+
 export const PostStartCauses = z.enum(["index", "create", "restore"]);
 export type PostStartCauses = z.infer<typeof PostStartCauses>;
 
diff --git a/packages/core/src/v3/types/tasks.ts b/packages/core/src/v3/types/tasks.ts
index 3b8b2e9ecdd..184aebe78a2 100644
--- a/packages/core/src/v3/types/tasks.ts
+++ b/packages/core/src/v3/types/tasks.ts
@@ -21,6 +21,7 @@ import {
   MachineMemory,
   MachinePresetName,
   RetryOptions,
+  PromptMetadata,
   TaskMetadata,
   TaskRunContext,
 } from "../schemas/index.js";
@@ -1008,6 +1009,13 @@ export type TaskMetadataWithFunctions = TaskMetadata & {
   schema?: TaskSchema;
 };
 
+export type PromptMetadataWithFunctions = PromptMetadata & {
+  fns: {
+    resolve: (variables: Record<string, unknown>) => Promise<unknown>;
+  };
+  schema?: TaskSchema;
+};
+
 export type RunTypes<TTaskIdentifier extends string, TPayload, TOutput> = {
   output: TOutput;
   payload: TPayload;
diff --git a/packages/trigger-sdk/src/v3/index.ts b/packages/trigger-sdk/src/v3/index.ts
index 43ee41e6e52..21ffa142871 100644
--- a/packages/trigger-sdk/src/v3/index.ts
+++ b/packages/trigger-sdk/src/v3/index.ts
@@ -59,3 +59,4 @@ export * as queues from "./queues.js";
 export type { ImportEnvironmentVariablesParams } from "./envvars.js";
 
 export { configure, auth } from "./auth.js";
+export * as prompts from "./prompts.js";
diff --git a/packages/trigger-sdk/src/v3/prompt.ts b/packages/trigger-sdk/src/v3/prompt.ts
new file mode 100644
index 00000000000..b7c3aeda9b6
--- /dev/null
+++ b/packages/trigger-sdk/src/v3/prompt.ts
@@ -0,0 +1,236 @@
+import {
+  accessoryAttributes,
+  apiClientManager,
+  resourceCatalog,
+  SemanticInternalAttributes,
+  taskContext,
+  type PromptMetadataWithFunctions,
+  type TaskSchema,
+  type inferSchemaIn,
+  getSchemaParseFn,
+} from "@trigger.dev/core/v3";
+import { tracer } from "./tracer.js";
+
+type PromptOptions<TVariables extends TaskSchema | undefined = undefined> = {
+  id: string;
+  description?: string;
+  model?: string;
+  config?: Record<string, unknown>;
+  variables?: TVariables;
+  content: string;
+};
+
+type ResolvedPrompt = {
+  promptId: string;
+  version: number;
+  labels: string[];
+  text: string;
+  model: string | undefined;
+  config: Record<string, unknown> | undefined;
+  /** Returns `experimental_telemetry` options for AI SDK calls (`generateText`, `streamText`, etc.) */
+  toAISDKTelemetry(additionalMetadata?: Record<string, string>): {
+    experimental_telemetry: {
+      isEnabled: true;
+      metadata: Record<string, string>;
+    };
+  };
+};
+
+export type { PromptOptions, ResolvedPrompt };
+
+export type PromptHandle<TVariables extends TaskSchema | undefined = undefined> = {
+  id: string;
+  resolve(
+    variables: inferSchemaIn<TVariables>,
+    options?: { label?: string; version?: number }
+  ): Promise<ResolvedPrompt>;
+};
+
+/**
+ * Compile a Mustache-style template by substituting `{{variable}}` placeholders.
+ */
+function compileTemplate(
+  template: string,
+  variables: Record<string, unknown>
+): string {
+  // Handle conditional sections: {{#key}}...{{/key}}
+  let result = template.replace(
+    /\{\{#(\w+)\}\}([\s\S]*?)\{\{\/\1\}\}/g,
+    (_match, key, content) => {
+      const value = variables[key];
+      return value
+        ? content.replace(/\{\{(\w+)\}\}/g, (_m: string, k: string) => {
+            return String(variables[k] ?? "");
+          })
+        : "";
+    }
+  );
+
+  // Handle simple substitutions: {{key}}
+  result = result.replace(/\{\{\s*(\w+)\s*\}\}/g, (_match, key) => {
+    const value = variables[key];
+    return value !== undefined && value !== null ? String(value) : "";
+  });
+
+  return result;
+}
+
+function makeToAISDKTelemetry(
+  slug: string,
+  promptId: string,
+  version: number,
+  labels: string[],
+  model?: string,
+  input?: string
+) {
+  return function toAISDKTelemetry(additionalMetadata?: Record<string, string>) {
+    return {
+      experimental_telemetry: {
+        isEnabled: true as const,
+        metadata: {
+          "prompt.slug": slug,
+          "prompt.id": promptId,
+          "prompt.version": String(version),
+          "prompt.labels": labels.join(", "),
+          ...(model ? { "prompt.model": model } : {}),
+          ...(input ? { "prompt.input": input } : {}),
+          ...additionalMetadata,
+        },
+      },
+    };
+  };
+}
+
+function resolveLocally(
+  options: PromptOptions<any>,
+  variables: Record<string, unknown>
+): ResolvedPrompt {
+  const inputJson = Object.keys(variables).length > 0 ? JSON.stringify(variables) : undefined;
+  const telemetryFn = makeToAISDKTelemetry(options.id, options.id, 0, ["local"], options.model, inputJson);
+
+  return {
+    promptId: options.id,
+    version: 0,
+    labels: ["local"],
+    text: compileTemplate(options.content, variables),
+    model: options.model,
+    config: options.config,
+    toAISDKTelemetry: telemetryFn,
+  };
+}
+
+export function definePrompt<TVariables extends TaskSchema | undefined = undefined>(
+  options: PromptOptions<TVariables>
+): PromptHandle<TVariables> {
+  const parseVariables = options.variables
+    ? getSchemaParseFn(options.variables)
+    : undefined;
+
+  // Register with resource catalog
+  const metadata: PromptMetadataWithFunctions = {
+    id: options.id,
+    description: options.description,
+    content: options.content,
+    model: options.model,
+    config: options.config,
+    variableSchema: undefined, // Set by CLI via schemaToJsonSchema
+    schema: options.variables,
+    fns: {
+      resolve: async (variables: Record<string, unknown>) => {
+        const validated = parseVariables ? await parseVariables(variables) : variables;
+        return resolveLocally(options, validated as Record<string, unknown>);
+      },
+    },
+  };
+
+  resourceCatalog.registerPromptMetadata(metadata);
+
+  return {
+    id: options.id,
+    resolve: async (variables, resolveOptions) => {
+      // Validate variables if schema provided
+      const validated = parseVariables
+        ? await parseVariables(variables)
+        : variables;
+      const vars = validated as Record<string, unknown>;
+
+      const ctx = taskContext.ctx;
+      const apiClient = apiClientManager.client;
+
+      // If we're running inside a task on the platform, resolve via the API
+      if (ctx && apiClient) {
+        const response = await apiClient.resolvePrompt(
+          options.id,
+          {
+            variables: vars,
+            label: resolveOptions?.label,
+            version: resolveOptions?.version,
+          },
+          {
+            tracer,
+            name: "prompt.resolve()",
+            icon: "tabler-file-text-ai",
+            attributes: {
+              [SemanticInternalAttributes.STYLE_ICON]: "tabler-file-text-ai",
+              [SemanticInternalAttributes.ENTITY_TYPE]: "prompt",
+              [SemanticInternalAttributes.ENTITY_ID]: options.id,
+              ...accessoryAttributes({
+                items: [
+                  {
+                    text: options.id,
+                    variant: "normal",
+                  },
+                ],
+                style: "codepath",
+              }),
+            },
+            onResponseBody: (body, span) => {
+              span.setAttribute("prompt.version", body.data.version);
+              span.setAttribute("prompt.slug", body.data.slug);
+              span.setAttribute("prompt.labels", body.data.labels.join(", "));
+              if (body.data.model) {
+                span.setAttribute("prompt.model", body.data.model);
+              }
+              if (body.data.template) {
+                span.setAttribute("prompt.template", body.data.template);
+              }
+              if (body.data.text) {
+                span.setAttribute("prompt.text", body.data.text);
+              }
+              if (body.data.config) {
+                span.setAttribute("prompt.config", JSON.stringify(body.data.config));
+              }
+              if (vars && Object.keys(vars).length > 0) {
+                span.setAttribute("prompt.input", JSON.stringify(vars));
+              }
+            },
+          }
+        );
+
+        const data = response.data;
+        const inputJson = vars && Object.keys(vars).length > 0 ? JSON.stringify(vars) : undefined;
+        const telemetryFn = makeToAISDKTelemetry(
+          data.slug,
+          data.promptId,
+          data.version,
+          data.labels,
+          data.model ?? undefined,
+          inputJson
+        );
+
+        return {
+          promptId: data.promptId,
+          version: data.version,
+          labels: data.labels,
+          text: data.text ?? "",
+          model: data.model ?? undefined,
+          config: (data.config as Record<string, unknown>) ?? undefined,
+          toAISDKTelemetry: telemetryFn,
+        };
+      }
+
+      // Fallback: resolve locally (outside platform or during dev)
+      return resolveLocally(options, vars);
+    },
+  };
+}
diff --git a/packages/trigger-sdk/src/v3/prompts.ts b/packages/trigger-sdk/src/v3/prompts.ts
new file mode 100644
index 00000000000..9ab8846de88
--- /dev/null
+++ b/packages/trigger-sdk/src/v3/prompts.ts
@@ -0,0 +1,2 @@
+export { definePrompt as define } from "./prompt.js";
+export type { PromptHandle, PromptOptions, ResolvedPrompt } from "./prompt.js";
diff --git a/patches/@window-splitter__state@0.4.1.patch b/patches/@window-splitter__state@0.4.1.patch
new file mode 100644
index 00000000000..8d99b717ba8
--- /dev/null
+++ b/patches/@window-splitter__state@0.4.1.patch
@@ -0,0 +1,28 @@
+diff --git a/dist/commonjs/index.js b/dist/commonjs/index.js
+index acb542b1b71a7e808173d938d16f45a484334f94..dc9289461b761f8f0d5c72919f48f94e394addfd 100644
+--- a/dist/commonjs/index.js
++++ b/dist/commonjs/index.js
+@@ -107,6 +107,9 @@ function prepareSnapshot(snapshot) {
+             if (item.max && item.max !== "1fr") {
+                 item.max.value = new big_js_1.default(item.max.value);
+             }
++            if (item.default && typeof item.default === "object" && item.default.value !== undefined) {
++                item.default.value = new big_js_1.default(item.default.value);
++            }
+         }
+         else {
+             item.size.value = new big_js_1.default(item.size.value);
+diff --git a/dist/esm/index.js b/dist/esm/index.js
+index 8891ac0141135a3a885bd704d9d443458c7a01bf..34cd7251f2298e7f9bfedfe4cadb797aa790b59a 100644
+--- a/dist/esm/index.js
++++ b/dist/esm/index.js
+@@ -81,6 +81,9 @@ export function prepareSnapshot(snapshot) {
+             if (item.max && item.max !== "1fr") {
+                 item.max.value = new Big(item.max.value);
+             }
++            if (item.default && typeof item.default === "object" && item.default.value !== undefined) {
++                item.default.value = new Big(item.default.value);
++            }
+         }
+         else {
+             item.size.value = new Big(item.size.value);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 854d4215447..1e5ca6bbfb0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -34,6 +34,9 @@ patchedDependencies:
   '@upstash/ratelimit@1.1.3':
     hash: e5922e50fbefb7b2b24950c4b1c5c9ddc4cd25464439c9548d2298c432debe74
     path: patches/@upstash__ratelimit.patch
+  '@window-splitter/state@0.4.1':
+    hash: da01382a3c0d3f4f66db5b09d6f0833cc21eaf8db00f97e2c1738797673b57c0
+    path: patches/@window-splitter__state@0.4.1.patch
   antlr4ts@0.5.0-alpha.4:
     hash: b5d41129ddbf7c4cbb0288244b2c8d041ee0803c5102c1181c180408d3b579f4
     path: patches/antlr4ts@0.5.0-alpha.4.patch
@@ -2372,6 +2375,9 @@ importers:
 
   references/hello-world:
     dependencies:
+      '@ai-sdk/openai':
+        specifier: ^3.0.41
+        version: 3.0.41(zod@3.25.76)
       '@sinclair/typebox':
         specifier: ^0.34.3
         version: 0.34.38
@@ -2381,6 +2387,9 @@ importers:
       '@trigger.dev/sdk':
         specifier: workspace:*
         version: link:../../packages/trigger-sdk
+      ai:
+        specifier: ^6.0.116
+        version: 6.0.116(zod@3.25.76)
       arktype:
         specifier: ^2.0.0
         version: 2.1.20
@@ -2646,7 +2655,7 @@ importers:
         version: 6.20.0-integration-next.8
       '@prisma/client':
         specifier: 6.20.0-integration-next.8
-        version: 6.20.0-integration-next.8(prisma@6.20.0-integration-next.8(@types/react@19.0.12)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4))(typescript@5.5.4)
+        version: 6.20.0-integration-next.8(prisma@6.20.0-integration-next.8(@types/react@19.2.14)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4))(typescript@5.5.4)
       '@trigger.dev/build':
         specifier: workspace:*
         version: link:../../packages/build
@@ -2659,7 +2668,7 @@ importers:
     devDependencies:
       prisma:
         specifier: 6.20.0-integration-next.8
-        version: 6.20.0-integration-next.8(@types/react@19.0.12)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4)
+        version: 6.20.0-integration-next.8(@types/react@19.2.14)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4)
       trigger.dev:
         specifier: workspace:*
         version: link:../../packages/cli-v3
@@ -2885,6 +2894,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/gateway@3.0.66':
+    resolution: {integrity: sha512-SIQ0YY0iMuv+07HLsZ+bB990zUJ6S4ujORAh+Jv1V2KGNn73qQKnGO0JBk+w+Res8YqOFSycwDoWcFlQrVxS4A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/openai@1.0.1':
     resolution: {integrity: sha512-snZge8457afWlosVNUn+BG60MrxAPOOm3zmIMxJZih8tneNSiRbTVCbSzAtq/9vsnOHDe5RR83PRl85juOYEnA==}
     engines: {node: '>=18'}
@@ -2915,6 +2930,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/openai@3.0.41':
+    resolution: {integrity: sha512-IZ42A+FO+vuEQCVNqlnAPYQnnUpUfdJIwn1BEDOBywiEHa23fw7PahxVtlX9zm3/zMvTW4JKPzWyvAgDu+SQ2A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider-utils@1.0.22':
     resolution: {integrity: sha512-YHK2rpj++wnLVc9vPGzGFP3Pjeld2MwhKinetA0zKXOoHAT/Jit5O8kZsxcSlJPu9wvcGT1UGZEjZrtO7PfFOQ==}
     engines: {node: '>=18'}
@@ -2963,6 +2984,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  '@ai-sdk/provider-utils@4.0.19':
+    resolution: {integrity: sha512-3eG55CrSWCu2SXlqq2QCsFjo3+E7+Gmg7i/oRVoSZzIodTuDSfLb3MRje67xE9RFea73Zao7Lm4mADIfUETKGg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   '@ai-sdk/provider@0.0.26':
     resolution: {integrity: sha512-dQkfBDs2lTYpKM8389oopPdQgIU007GQyCbuPPrV+K6MtSII3HBfE0stUIMXUb44L+LK1t6GXPP7wjSzjO6uKg==}
     engines: {node: '>=18'}
@@ -2987,6 +3014,10 @@ packages:
     resolution: {integrity: sha512-m9ka3ptkPQbaHHZHqDXDF9C9B5/Mav0KTdky1k2HZ3/nrW2t1AgObxIVPyGDWQNS9FXT/FS6PIoSjpcP/No8rQ==}
     engines: {node: '>=18'}
 
+  '@ai-sdk/provider@3.0.8':
+    resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
+    engines: {node: '>=18'}
+
   '@ai-sdk/react@1.0.0':
     resolution: {integrity: sha512-BDrZqQA07Btg64JCuhFvBgYV+tt2B8cXINzEqWknGoxqcwgdE8wSLG2gkXoLzyC2Rnj7oj0HHpOhLUxDCmoKZg==}
     engines: {node: '>=18'}
@@ -10902,6 +10933,9 @@ packages:
   '@types/react@19.0.12':
     resolution: {integrity: sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==}
 
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
   '@types/readable-stream@4.0.14':
     resolution: {integrity: sha512-xZn/AuUbCMShGsqH/ehZtGDwQtbx00M9rZ2ENLe4tOjFZ/JFeWMhEZkk2fEe1jAUqqEAURIkFJ7Az/go8mM1/w==}
 
@@ -11152,6 +11186,10 @@ packages:
     resolution: {integrity: sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==}
     engines: {node: '>= 20'}
 
+  '@vercel/oidc@3.1.0':
+    resolution: {integrity: sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==}
+    engines: {node: '>= 20'}
+
   '@vercel/otel@1.13.0':
     resolution: {integrity: sha512-esRkt470Y2jRK1B1g7S1vkt4Csu44gp83Zpu8rIyPoqy2BKgk4z7ik1uSMswzi45UogLHFl6yR5TauDurBQi4Q==}
     engines: {node: '>=18'}
@@ -11498,6 +11536,12 @@ packages:
     peerDependencies:
       zod: ^3.25.76 || ^4.1.8
 
+  ai@6.0.116:
+    resolution: {integrity: sha512-7yM+cTmyRLeNIXwt4Vj+mrrJgVQ9RMIW5WO0ydoLoYkewIvsMcvUmqS4j2RJTUXaF1HphwmSKUMQ/HypNRGOmA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4.1.8
+
   ai@6.0.3:
     resolution: {integrity: sha512-OOo+/C+sEyscoLnbY3w42vjQDICioVNyS+F+ogwq6O5RJL/vgWGuiLzFwuP7oHTeni/MkmX8tIge48GTdaV7QQ==}
     engines: {node: '>=18'}
@@ -12551,6 +12595,9 @@ packages:
   csstype@3.2.0:
     resolution: {integrity: sha512-si++xzRAY9iPp60roQiFta7OFbhrgvcthrhlNAGeQptSY25uJjkfUV8OArC3KLocB8JT8ohz+qgxWCmz8RhjIg==}
 
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
   csv-generate@3.4.3:
     resolution: {integrity: sha512-w/T+rqR0vwvHqWs/1ZyMDWtHHSJaN06klRqJXBEpDJaM/+dZkso0OKh1VcuuYvK3XM53KysVNq8Ko/epCK8wOw==}
 
@@ -14287,6 +14334,7 @@ packages:
   glob@9.3.5:
     resolution: {integrity: sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==}
     engines: {node: '>=16 || 14 >=14.17'}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
@@ -16926,9 +16974,6 @@ packages:
   pg-cloudflare@1.2.7:
     resolution: {integrity: sha512-YgCtzMH0ptvZJslLM1ffsY4EuGaU0cx4XSdXLRFae8bPP4dS5xL1tNB3k2o/N64cHJpwU7dxKli/nZ2lUa5fLg==}
 
-  pg-connection-string@2.6.4:
-    resolution: {integrity: sha512-v+Z7W/0EO707aNMaAEfiGnGL9sxxumwLl2fJvCQtMn9Fxsg+lPpPkdcyBSv/KFgpGdYkMfn+EI1Or2EHjpgLCA==}
-
   pg-connection-string@2.8.5:
     resolution: {integrity: sha512-Ni8FuZ8yAF+sWZzojvtLE2b03cqjO5jNULcHFfM9ZZ0/JXrgom5pBREbtnAw7oxsxJqHw9Nz/XWORUEL3/IFow==}
 
@@ -16948,11 +16993,6 @@ packages:
     peerDependencies:
       pg: '>=8.0'
 
-  pg-pool@3.6.2:
-    resolution: {integrity: sha512-Htjbg8BlwXqSBQ9V8Vjtc+vzf/6fVUuak/3/XXKA9oxZprwW3IMDQTGHP+KDmVL7rtd+R1QjbnCFPuTHm3G4hg==}
-    peerDependencies:
-      pg: '>=8.0'
-
   pg-pool@3.9.6:
     resolution: {integrity: sha512-rFen0G7adh1YmgvrmE5IPIqbb+IgEzENUm+tzm6MLLDSlPRoZVhzU1WdML9PV2W5GOdRA9qBKURlbt1OsXOsPw==}
     peerDependencies:
@@ -17249,10 +17289,6 @@ packages:
     resolution: {integrity: sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.3:
-    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.4:
     resolution: {integrity: sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==}
     engines: {node: ^10 || ^12 || >=14}
@@ -20309,6 +20345,13 @@ snapshots:
       '@vercel/oidc': 3.0.5
       zod: 3.25.76
 
+  '@ai-sdk/gateway@3.0.66(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
+      '@vercel/oidc': 3.1.0
+      zod: 3.25.76
+
   '@ai-sdk/openai@1.0.1(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider': 1.0.0
@@ -20339,6 +20382,12 @@ snapshots:
       '@ai-sdk/provider-utils': 3.0.12(zod@3.25.76)
       zod: 3.25.76
 
+  '@ai-sdk/openai@3.0.41(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
+      zod: 3.25.76
+
   '@ai-sdk/provider-utils@1.0.22(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider': 0.0.26
@@ -20393,6 +20442,13 @@ snapshots:
       eventsource-parser: 3.0.6
       zod: 3.25.76
 
+  '@ai-sdk/provider-utils@4.0.19(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.6
+      zod: 3.25.76
+
   '@ai-sdk/provider@0.0.26':
     dependencies:
       json-schema: 0.4.0
@@ -20417,6 +20473,10 @@ snapshots:
     dependencies:
       json-schema: 0.4.0
 
+  '@ai-sdk/provider@3.0.8':
+    dependencies:
+      json-schema: 0.4.0
+
   '@ai-sdk/react@1.0.0(react@18.3.1)(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider-utils': 2.0.0(zod@3.25.76)
@@ -20493,7 +20553,7 @@ snapshots:
       commander: 10.0.1
       marked: 9.1.6
       marked-terminal: 7.1.0(marked@9.1.6)
-      semver: 7.6.3
+      semver: 7.7.3
 
   '@arethetypeswrong/core@0.15.1':
     dependencies:
@@ -25473,7 +25533,7 @@ snapshots:
   '@prisma/adapter-pg@6.16.0':
     dependencies:
       '@prisma/driver-adapter-utils': 6.16.0
-      pg: 8.15.6
+      pg: 8.16.3
       postgres-array: 3.0.4
     transitivePeerDependencies:
       - pg-native
@@ -25509,11 +25569,11 @@ snapshots:
       prisma: 6.19.0(typescript@5.5.4)
       typescript: 5.5.4
 
-  '@prisma/client@6.20.0-integration-next.8(prisma@6.20.0-integration-next.8(@types/react@19.0.12)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4))(typescript@5.5.4)':
+  '@prisma/client@6.20.0-integration-next.8(prisma@6.20.0-integration-next.8(@types/react@19.2.14)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4))(typescript@5.5.4)':
     dependencies:
       '@prisma/client-runtime-utils': 6.20.0-integration-next.8
     optionalDependencies:
-      prisma: 6.20.0-integration-next.8(@types/react@19.0.12)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4)
+      prisma: 6.20.0-integration-next.8(@types/react@19.2.14)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4)
       typescript: 5.5.4
 
   '@prisma/config@6.14.0(magicast@0.3.5)':
@@ -25677,9 +25737,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@prisma/studio-core-licensed@0.6.0(@types/react@19.0.12)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@prisma/studio-core-licensed@0.6.0(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
-      '@types/react': 19.0.12
+      '@types/react': 19.2.14
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
@@ -25785,14 +25845,14 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-avatar@1.1.3(@types/react-dom@19.0.4(@types/react@19.0.12))(@types/react@19.0.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
@@ -25807,21 +25867,21 @@ snapshots:
       '@types/react': 19.0.12
       '@types/react-dom': 19.0.4(@types/react@19.0.12)
 
-  '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collapsible@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-collapsible@1.1.11(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -25873,17 +25933,17 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-collection@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-collection@1.1.7(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -25976,6 +26036,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-context@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-context@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
@@ -26086,12 +26153,12 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
-  '@radix-ui/react-direction@1.0.1(@types/react@18.3.1)(react@18.3.1)':
+  '@radix-ui/react-direction@1.0.1(@types/react@18.2.69)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
 
   '@radix-ui/react-direction@1.1.0(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
@@ -26130,6 +26197,20 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
+  '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.2.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.69
+      '@types/react-dom': 18.2.7
+
   '@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -26144,18 +26225,18 @@ snapshots:
       '@types/react': 18.3.1
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-focus-guards@1.0.0(react@18.2.0)':
@@ -26170,6 +26251,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -26210,16 +26298,16 @@ snapshots:
       '@types/react': 18.3.1
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-icons@1.3.0(react@18.3.1)':
@@ -26246,6 +26334,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-id@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-id@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -26291,28 +26387,28 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popover@1.0.7(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       aria-hidden: 1.2.4
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
-      react-remove-scroll: 2.5.5(@types/react@18.3.1)(react@18.3.1)
+      react-remove-scroll: 2.5.5(@types/react@18.2.69)(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-popper@1.1.1(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -26333,42 +26429,42 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@floating-ui/react-dom': 2.0.9(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       '@radix-ui/rect': 1.0.1
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-popper@1.1.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@floating-ui/react-dom': 2.0.9(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-size': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-arrow': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       '@radix-ui/rect': 1.0.1
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-portal@1.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -26388,6 +26484,16 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
+  '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.2.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.69
+      '@types/react-dom': 18.2.7
+
   '@radix-ui/react-portal@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -26398,14 +26504,14 @@ snapshots:
       '@types/react': 18.3.1
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-portal@1.1.9(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -26445,6 +26551,17 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
+  '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.2.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.69
+      '@types/react-dom': 18.2.7
+
   '@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
@@ -26500,6 +26617,16 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
+  '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.26.7
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.2.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.69
+      '@types/react-dom': 18.2.7
+
   '@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
@@ -26623,22 +26750,22 @@ snapshots:
       '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-roving-focus@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-scroll-area@1.2.0(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
@@ -26815,32 +26942,32 @@ snapshots:
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
 
-  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle-group@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
-  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-tooltip@1.0.5(@types/react@18.2.69)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
@@ -26863,25 +26990,25 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/primitive': 1.0.1
-      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-id': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-dismissable-layer': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-popper': 1.1.2(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-portal': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0)':
@@ -26901,6 +27028,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -26940,6 +27074,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.27.4
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.27.4
@@ -26977,6 +27119,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.69)(react@18.3.1)
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -27002,6 +27152,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.69)(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.27.4
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.27.4
@@ -27045,13 +27202,13 @@ snapshots:
       '@radix-ui/rect': 1.0.0
       react: 18.2.0
 
-  '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.1)(react@18.3.1)':
+  '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.69)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
       '@radix-ui/rect': 1.0.1
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
 
   '@radix-ui/react-use-size@1.0.0(react@18.2.0)':
     dependencies:
@@ -27067,13 +27224,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
-  '@radix-ui/react-use-size@1.0.1(@types/react@18.3.1)(react@18.3.1)':
+  '@radix-ui/react-use-size@1.0.1(@types/react@18.2.69)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.26.7
-      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
 
   '@radix-ui/react-visually-hidden@1.0.2(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
     dependencies:
@@ -27082,14 +27239,14 @@ snapshots:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
+  '@radix-ui/react-visually-hidden@1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.28.4
-      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.2.0(react@18.3.1)
     optionalDependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
 
   '@radix-ui/rect@1.0.0':
@@ -28159,7 +28316,7 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@react-email/components@0.0.17(@types/react@18.3.1)(react@18.3.1)':
+  '@react-email/components@0.0.17(@types/react@18.2.69)(react@18.3.1)':
     dependencies:
       '@react-email/body': 0.0.8(react@18.3.1)
       '@react-email/button': 0.0.15(react@18.3.1)
@@ -28169,7 +28326,7 @@ snapshots:
       '@react-email/container': 0.0.12(react@18.3.1)
       '@react-email/font': 0.0.6(react@18.3.1)
       '@react-email/head': 0.0.8(react@18.3.1)
-      '@react-email/heading': 0.0.12(@types/react@18.3.1)(react@18.3.1)
+      '@react-email/heading': 0.0.12(@types/react@18.2.69)(react@18.3.1)
       '@react-email/hr': 0.0.8(react@18.3.1)
       '@react-email/html': 0.0.8(react@18.3.1)
       '@react-email/img': 0.0.8(react@18.3.1)
@@ -28216,9 +28373,9 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@react-email/heading@0.0.12(@types/react@18.3.1)(react@18.3.1)':
+  '@react-email/heading@0.0.12(@types/react@18.2.69)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
       react: 18.3.1
     transitivePeerDependencies:
       - '@types/react'
@@ -30640,7 +30797,7 @@ snapshots:
       '@tailwindcss/node': 4.0.17
       '@tailwindcss/oxide': 4.0.17
       lightningcss: 1.29.2
-      postcss: 8.5.3
+      postcss: 8.5.6
       tailwindcss: 4.0.17
 
   '@tailwindcss/typography@0.5.9(tailwindcss@3.4.1)':
@@ -31122,7 +31279,7 @@ snapshots:
   '@types/pg@8.11.6':
     dependencies:
       '@types/node': 20.14.14
-      pg-protocol: 1.6.1
+      pg-protocol: 1.10.3
       pg-types: 4.0.2
 
   '@types/pg@8.6.1':
@@ -31158,7 +31315,7 @@ snapshots:
 
   '@types/react-dom@18.2.7':
     dependencies:
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
 
   '@types/react-dom@19.0.4(@types/react@19.0.12)':
     dependencies:
@@ -31183,7 +31340,11 @@ snapshots:
 
   '@types/react@19.0.12':
     dependencies:
-      csstype: 3.1.3
+      csstype: 3.2.0
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
 
   '@types/readable-stream@4.0.14':
     dependencies:
@@ -31522,6 +31683,8 @@ snapshots:
 
   '@vercel/oidc@3.0.5': {}
 
+  '@vercel/oidc@3.1.0': {}
+
   '@vercel/otel@1.13.0(@opentelemetry/api-logs@0.203.0)(@opentelemetry/api@1.9.0)(@opentelemetry/instrumentation@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-logs@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-metrics@2.0.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))':
     dependencies:
       '@opentelemetry/api': 1.9.0
@@ -31790,7 +31953,7 @@ snapshots:
       fast-url-parser: 1.1.3
       tslib: 2.8.1
 
-  '@window-splitter/state@0.4.1':
+  '@window-splitter/state@0.4.1(patch_hash=da01382a3c0d3f4f66db5b09d6f0833cc21eaf8db00f97e2c1738797673b57c0)':
     dependencies:
       '@react-spring/rafz': 9.7.4
       '@types/invariant': 2.2.37
@@ -31959,6 +32122,14 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       zod: 3.25.76
 
+  ai@6.0.116(zod@3.25.76):
+    dependencies:
+      '@ai-sdk/gateway': 3.0.66(zod@3.25.76)
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.19(zod@3.25.76)
+      '@opentelemetry/api': 1.9.0
+      zod: 3.25.76
+
   ai@6.0.3(zod@3.25.76):
     dependencies:
       '@ai-sdk/gateway': 3.0.2(zod@3.25.76)
@@ -33119,6 +33290,8 @@ snapshots:
 
   csstype@3.2.0: {}
 
+  csstype@3.2.3: {}
+
   csv-generate@3.4.3: {}
 
   csv-parse@4.16.3: {}
@@ -33748,7 +33921,7 @@ snapshots:
   enhanced-resolve@5.15.0:
     dependencies:
       graceful-fs: 4.2.11
-      tapable: 2.2.1
+      tapable: 2.3.0
 
   enhanced-resolve@5.18.3:
     dependencies:
@@ -34240,7 +34413,7 @@ snapshots:
       eslint: 8.31.0
       eslint-module-utils: 2.7.4(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.7)(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
       eslint-plugin-import: 2.29.1(@typescript-eslint/parser@5.59.6(eslint@8.31.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.5.5)(eslint@8.31.0)
-      get-tsconfig: 4.7.2
+      get-tsconfig: 4.7.6
       globby: 13.2.2
       is-core-module: 2.14.0
       is-glob: 4.0.3
@@ -36023,7 +36196,7 @@ snapshots:
   istanbul-lib-source-maps@5.0.6:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
-      debug: 4.4.3(supports-color@10.0.0)
+      debug: 4.4.1
       istanbul-lib-coverage: 3.2.2
     transitivePeerDependencies:
       - supports-color
@@ -38385,8 +38558,6 @@ snapshots:
   pg-cloudflare@1.2.7:
     optional: true
 
-  pg-connection-string@2.6.4: {}
-
   pg-connection-string@2.8.5: {}
 
   pg-connection-string@2.9.1: {}
@@ -38395,13 +38566,13 @@ snapshots:
 
   pg-numeric@1.0.2: {}
 
-  pg-pool@3.10.1(pg@8.16.3):
+  pg-pool@3.10.1(pg@8.11.5):
     dependencies:
-      pg: 8.16.3
+      pg: 8.11.5
 
-  pg-pool@3.6.2(pg@8.11.5):
+  pg-pool@3.10.1(pg@8.16.3):
     dependencies:
-      pg: 8.11.5
+      pg: 8.16.3
 
   pg-pool@3.9.6(pg@8.15.6):
     dependencies:
@@ -38433,9 +38604,9 @@ snapshots:
 
   pg@8.11.5:
     dependencies:
-      pg-connection-string: 2.6.4
-      pg-pool: 3.6.2(pg@8.11.5)
-      pg-protocol: 1.6.1
+      pg-connection-string: 2.9.1
+      pg-pool: 3.10.1(pg@8.11.5)
+      pg-protocol: 1.10.3
       pg-types: 2.2.0
       pgpass: 1.0.5
     optionalDependencies:
@@ -38750,12 +38921,6 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.0
 
-  postcss@8.5.3:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.4:
     dependencies:
       nanoid: 3.3.11
@@ -38901,11 +39066,11 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  prisma@6.20.0-integration-next.8(@types/react@19.0.12)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4):
+  prisma@6.20.0-integration-next.8(@types/react@19.2.14)(magicast@0.3.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.5.4):
     dependencies:
       '@prisma/config': 6.20.0-integration-next.8(magicast@0.3.5)
       '@prisma/engines': 6.20.0-integration-next.8
-      '@prisma/studio-core-licensed': 0.6.0(@types/react@19.0.12)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@prisma/studio-core-licensed': 0.6.0(@types/react@19.2.14)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       postgres: 3.4.7
     optionalDependencies:
       typescript: 5.5.4
@@ -39249,15 +39414,15 @@ snapshots:
     dependencies:
       '@babel/parser': 7.24.1
       '@radix-ui/colors': 1.0.1
-      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-popover': 1.0.7(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
-      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@radix-ui/react-tooltip': 1.0.6(@types/react-dom@18.2.7)(@types/react@18.3.1)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
-      '@react-email/components': 0.0.17(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-popover': 1.0.7(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.69)(react@18.3.1)
+      '@radix-ui/react-toggle-group': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tooltip': 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.69)(react-dom@18.2.0(react@18.3.1))(react@18.3.1)
+      '@react-email/components': 0.0.17(@types/react@18.2.69)(react@18.3.1)
       '@react-email/render': 0.0.13
       '@swc/core': 1.3.101(@swc/helpers@0.5.15)
-      '@types/react': 18.3.1
+      '@types/react': 18.2.69
       '@types/react-dom': 18.2.7
       '@types/webpack': 5.28.5(@swc/core@1.3.101(@swc/helpers@0.5.15))(esbuild@0.19.11)
       autoprefixer: 10.4.14(postcss@8.4.35)
@@ -39400,6 +39565,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  react-remove-scroll-bar@2.3.8(@types/react@18.2.69)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/react@18.2.69)(react@18.3.1)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   react-remove-scroll-bar@2.3.8(@types/react@18.3.1)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -39419,6 +39592,17 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  react-remove-scroll@2.5.5(@types/react@18.2.69)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/react@18.2.69)(react@18.3.1)
+      react-style-singleton: 2.2.3(@types/react@18.2.69)(react@18.3.1)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.2.69)(react@18.3.1)
+      use-sidecar: 1.1.3(@types/react@18.2.69)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   react-remove-scroll@2.5.5(@types/react@18.3.1)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -39497,6 +39681,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  react-style-singleton@2.2.3(@types/react@18.2.69)(react@18.3.1):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   react-style-singleton@2.2.3(@types/react@18.3.1)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -39542,7 +39734,7 @@ snapshots:
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.69)(react@18.2.0)
       '@testing-library/jest-dom': 6.5.0
-      '@window-splitter/state': 0.4.1
+      '@window-splitter/state': 0.4.1(patch_hash=da01382a3c0d3f4f66db5b09d6f0833cc21eaf8db00f97e2c1738797673b57c0)
       '@xstate/react': 4.1.2(@types/react@18.2.69)(react@18.2.0)(xstate@5.18.1)
       invariant: 2.2.4
       react: 18.2.0
@@ -41886,6 +42078,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  use-callback-ref@1.3.3(@types/react@18.2.69)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   use-callback-ref@1.3.3(@types/react@18.3.1)(react@18.3.1):
     dependencies:
       react: 18.3.1
@@ -41907,6 +42106,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.69
 
+  use-sidecar@1.1.3(@types/react@18.2.69)(react@18.3.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.2.69
+
   use-sidecar@1.1.3(@types/react@18.3.1)(react@18.3.1):
     dependencies:
       detect-node-es: 1.1.0
diff --git a/references/hello-world/package.json b/references/hello-world/package.json
index dea86c6b7af..dc9bff17310 100644
--- a/references/hello-world/package.json
+++ b/references/hello-world/package.json
@@ -6,8 +6,10 @@
     "trigger.dev": "workspace:*"
   },
   "dependencies": {
+    "@ai-sdk/openai": "^3.0.41",
     "@trigger.dev/build": "workspace:*",
     "@trigger.dev/sdk": "workspace:*",
+    "ai": "^6.0.116",
     "arktype": "^2.0.0",
     "openai": "^4.97.0",
     "puppeteer-core": "^24.15.0",
diff --git a/references/hello-world/src/trigger/prompts.ts b/references/hello-world/src/trigger/prompts.ts
new file mode 100644
index 00000000000..f1b755dcd3a
--- /dev/null
+++ b/references/hello-world/src/trigger/prompts.ts
@@ -0,0 +1,284 @@
+import { task, logger, prompts } from "@trigger.dev/sdk";
+import { generateText, generateObject, streamText, tool, stepCountIs } from "ai";
+import { openai } from "@ai-sdk/openai";
+import { z } from "zod";
+
+// ─── Prompt definitions ──────────────────────────────────
+
+export const supportPrompt = prompts.define({
+  id: "customer-support",
+  description: "System prompt for great customer support interactions",
+  model: "gpt-4o",
+  config: { temperature: 0.7, maxTokens: 2000 },
+  variables: z.object({
+    customerName: z.string(),
+    plan: z.string(),
+    issue: z.string(),
+    previousMessages: z.string().optional(),
+  }),
+  content: `You are a senior customer support agent for Acme SaaS, a project management platform. You handle billing, account, and technical support inquiries with empathy and precision.
+
+## Customer context
+
+- **Name:** {{customerName}}
+- **Plan:** {{plan}}
+- **Reported issue:** {{issue}}
+
+## Your responsibilities
+
+1. **Diagnose the issue** — Ask clarifying questions if the problem is ambiguous. Do not guess.
+2. **Resolve when possible** — Use the tools provided (lookup_order, check_subscription, reset_password, issue_refund, update_billing) to take direct action.
+3. **Escalate when necessary** — If you cannot resolve the issue within your authority, use the escalate_to_human tool. Always include a summary of what you've already tried.
+
+## Guidelines
+
+### Tone and language
+- Address the customer by their first name.
+- Be concise but warm. Avoid corporate jargon.
+- Never blame the customer. Use phrases like "I can see that..." or "It looks like..." instead of "You did...".
+- If something is our fault, acknowledge it directly: "I'm sorry about that — this shouldn't have happened."
+
+### Billing and refunds
+- Customers on the **Free** plan are not eligible for refunds.
+- Customers on the **Pro** plan can receive refunds for charges within the last 30 days, up to $500, without manager approval.
+- Customers on the **Enterprise** plan: any refund over $200 requires escalation to the billing team.
+- If a customer was double-charged, issue a refund immediately and apologize.
+- Never share internal pricing tiers or discount structures.
+
+### Account and security
+- You can trigger a password reset email but cannot view or change passwords directly.
+- If a customer reports unauthorized access, immediately escalate to the security team using escalate_to_human with priority "urgent".
+- Do not share account details (email, billing info) without first verifying the customer's identity through their registered email.
+
+### Technical issues
+- For issues related to project creation, task boards, or integrations, check our known issues list first.
+- If the issue matches a known bug, share the workaround and let the customer know it's being tracked.
+- For API-related questions, link to the relevant docs page: https://docs.acme-saas.com/api
+- If the issue is not in the known issues list and you cannot diagnose it, escalate to engineering support.
+
+### What you must never do
+- Never make up information about product features, pricing, or policies.
+- Never promise a timeline for bug fixes or feature releases.
+- Never share internal Slack messages, Jira tickets, or employee names.
+- Never ask the customer to "try again later" without a concrete reason.
+
+{{#previousMessages}}
+## Conversation history
+
+{{previousMessages}}
+{{/previousMessages}}
+
+Respond to the customer's issue now. Start by acknowledging their problem, then either resolve it directly or ask the one most important clarifying question.`,
+});
+
+export const summarizerPrompt = prompts.define({
+  id: "summarizer",
+  description: "Summarizes text content",
+  model: "gpt-4o-mini",
+  config: { temperature: 0.3 },
+  variables: z.object({
+    text: z.string(),
+    maxSentences: z.string().optional(),
+  }),
+  content: `Summarize the following text{{#maxSentences}} in {{maxSentences}} sentences or fewer{{/maxSentences}}:
+
+{{text}}`,
+});
+
+// ─── Test task: resolve prompts locally ──────────────────
+
+export const testPromptsTask = task({
+  id: "test-prompts",
+  run: async () => {
+    const support = await supportPrompt.resolve({
+      customerName: "Alice Johnson",
+      plan: "Pro",
+      issue: "Cannot access billing dashboard",
+    });
+
+    logger.info("Support prompt resolved", {
+      version: support.version,
+      model: support.model,
+      text: support.text,
+    });
+
+    const summarizer = await summarizerPrompt.resolve({
+      text: "Trigger.dev is a platform for building and running background tasks. It provides a TypeScript SDK for defining tasks, and a dashboard for monitoring and managing them.",
+      maxSentences: "2",
+    });
+
+    logger.info("Summarizer prompt resolved", {
+      version: summarizer.version,
+      model: summarizer.model,
+      text: summarizer.text,
+    });
+
+    return {
+      supportPrompt: support.text,
+      summarizerText: summarizer.text,
+    };
+  },
+});
+
+// ─── AI SDK integration: generateText with prompt ────────
+
+export const generateWithPromptTask = task({
+  id: "generate-with-prompt",
+  run: async (payload: { customerName: string; plan: string; issue: string }) => {
+    const resolved = await supportPrompt.resolve({
+      customerName: payload.customerName,
+      plan: payload.plan,
+      issue: payload.issue,
+    });
+
+    // Use with generateText — spread toAISDKTelemetry to link the AI span to the prompt
+    const result = await generateText({
+      model: openai(resolved.model ?? "gpt-4o-mini"),
+      system: resolved.text,
+      prompt: `The customer says: "${payload.issue}". Please help them.`,
+      ...resolved.toAISDKTelemetry(),
+    });
+
+    logger.info("AI response generated", {
+      promptVersion: resolved.version,
+      promptLabels: resolved.labels,
+      responseLength: result.text.length,
+    });
+
+    return { response: result.text };
+  },
+});
+
+// ─── AI SDK integration: summarize with prompt ───────────
+
+export const summarizeTask = task({
+  id: "summarize-with-prompt",
+  run: async (payload: { text: string; maxSentences?: string }) => {
+    const resolved = await summarizerPrompt.resolve({
+      text: payload.text,
+      maxSentences: payload.maxSentences,
+    });
+
+    // Use the resolved prompt as the user prompt directly
+    const result = await generateText({
+      model: openai("gpt-4o-mini"),
+      prompt: resolved.text,
+      ...resolved.toAISDKTelemetry({ "task.type": "summarization" }),
+    });
+
+    logger.info("Summary generated", {
+      promptVersion: resolved.version,
+      inputLength: payload.text.length,
+      outputLength: result.text.length,
+    });
+
+    return { summary: result.text };
+  },
+});
+
+// ─── AI SDK integration: streamText with prompt ──────────
+
+export const streamWithPromptTask = task({
+  id: "stream-with-prompt",
+  run: async (payload: { customerName: string; plan: string; issue: string }) => {
+    const resolved = await supportPrompt.resolve({
+      customerName: payload.customerName,
+      plan: payload.plan,
+      issue: payload.issue,
+    });
+
+    const result = streamText({
+      model: openai(resolved.model ?? "gpt-4o-mini"),
+      system: resolved.text,
+      prompt: `The customer says: "${payload.issue}". Please help them.`,
+      tools: {
+        check_subscription: tool({
+          description: "Look up the customer's current subscription status and plan details",
+          inputSchema: z.object({
+            customerName: z.string().describe("The customer's name"),
+          }),
+          execute: async ({ customerName }) => ({
+            plan: payload.plan,
+            status: "active",
+            billingCycle: "monthly",
+            nextBillingDate: "2026-04-01",
+          }),
+        }),
+        escalate_to_human: tool({
+          description: "Escalate the issue to a human support agent",
+          inputSchema: z.object({
+            summary: z.string().describe("Summary of the issue and what has been tried"),
+            priority: z.enum(["low", "medium", "high", "urgent"]).describe("Urgency level"),
+          }),
+          execute: async ({ summary, priority }) => ({
+            ticketId: "ESC-1234",
+            status: "escalated",
+            priority,
+          }),
+        }),
+      },
+      stopWhen: stepCountIs(3),
+      ...resolved.toAISDKTelemetry(),
+    });
+
+    let fullText = "";
+    for await (const chunk of result.textStream) {
+      fullText += chunk;
+    }
+
+    logger.info("Streamed response complete", {
+      promptVersion: resolved.version,
+      responseLength: fullText.length,
+    });
+
+    return { response: fullText };
+  },
+});
+
+// ─── Prompt for structured extraction ────────────────────
+
+export const extractContactPrompt = prompts.define({
+  id: "extract-contact",
+  description: "Extracts structured contact info from freeform text",
+  model: "gpt-4o-mini",
+  config: { temperature: 0 },
+  variables: z.object({
+    text: z.string(),
+  }),
+  content: `Extract the contact information from the following text. If a field is not present, omit it.
+
+Text:
+{{text}}`,
+});
+
+// ─── AI SDK integration: generateObject with prompt ──────
+
+export const generateObjectWithPromptTask = task({
+  id: "generate-object-with-prompt",
+  run: async (payload: { text: string }) => {
+    const resolved = await extractContactPrompt.resolve({
+      text: payload.text,
+    });
+
+    const result = await generateObject({
+      model: openai(resolved.model ?? "gpt-4o-mini"),
+      system: resolved.text,
+      prompt: payload.text,
+      schema: z.object({
+        name: z.string().describe("Full name, or empty string if not found"),
+        email: z.string().describe("Email address, or empty string if not found"),
+        phone: z.string().describe("Phone number, or empty string if not found"),
+        company: z.string().describe("Company name, or empty string if not found"),
+        role: z.string().describe("Job title or role, or empty string if not found"),
+      }),
+      ...resolved.toAISDKTelemetry(),
+    });
+
+    logger.info("Contact extracted", {
+      promptVersion: resolved.version,
+      contact: result.object,
+    });
+
+    return { contact: result.object };
+  },
+});

From 3c696b78dc197abfdcbb874a955e5f014b66324b Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 20 Mar 2026 16:55:18 +0000
Subject: [PATCH 02/24] feat: operations/providers filters, prompt version
 model display, override fixes, llm pricing sync

---
 .../components/metrics/OperationsFilter.tsx   | 137 +++++++++++++
 .../components/metrics/ProvidersFilter.tsx    | 123 +++++++++++
 .../presenters/v3/BuiltInDashboards.server.ts |   2 +-
 .../v3/MetricDashboardPresenter.server.ts     |   2 +-
 .../presenters/v3/PromptPresenter.server.ts   |  10 +-
 .../route.tsx                                 |  68 ++++++
 .../route.tsx                                 |  27 ++-
 apps/webapp/app/routes/resources.metric.tsx   |   8 +
 .../app/services/queryService.server.ts       |  10 +
 .../v3/utils/enrichCreatableEvents.server.ts  |  19 +-
 .../llm-pricing/src/default-model-prices.json | 194 +++++++++++++++---
 .../llm-pricing/src/defaultPrices.ts          | 124 +++++++++--
 12 files changed, 660 insertions(+), 64 deletions(-)
 create mode 100644 apps/webapp/app/components/metrics/OperationsFilter.tsx
 create mode 100644 apps/webapp/app/components/metrics/ProvidersFilter.tsx

diff --git a/apps/webapp/app/components/metrics/OperationsFilter.tsx b/apps/webapp/app/components/metrics/OperationsFilter.tsx
new file mode 100644
index 00000000000..679332fc3c4
--- /dev/null
+++ b/apps/webapp/app/components/metrics/OperationsFilter.tsx
@@ -0,0 +1,137 @@
+import { CommandLineIcon } from "@heroicons/react/20/solid";
+import * as Ariakit from "@ariakit/react";
+import { type ReactNode, useMemo } from "react";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import {
+  ComboBox,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+
+const shortcut = { key: "n" };
+
+interface OperationsFilterProps {
+  possibleOperations: string[];
+}
+
+/** Pretty-print an operation ID like "ai.generateText.doGenerate" → "generateText" */
+function formatOperation(op: string): string {
+  const parts = op.split(".");
+  // ai.generateText.doGenerate → generateText
+  // ai.streamText.doStream → streamText
+  if (parts.length >= 2 && parts[0] === "ai") {
+    return parts[1];
+  }
+  return op;
+}
+
+export function OperationsFilter({ possibleOperations }: OperationsFilterProps) {
+  const { values, replace, del } = useSearchParams();
+  const selectedOperations = values("operations");
+
+  if (selectedOperations.length === 0 || selectedOperations.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <OperationsDropdown
+            trigger={
+              <SelectTrigger
+                icon={<CommandLineIcon className="size-4" />}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by operation"
+              >
+                <span className="ml-0.5">Operations</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+            possibleOperations={possibleOperations}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <OperationsDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Operation"
+                icon={<CommandLineIcon className="size-4" />}
+                value={appliedSummary(selectedOperations.map(formatOperation))}
+                onRemove={() => del(["operations"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          possibleOperations={possibleOperations}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function OperationsDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  possibleOperations,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  possibleOperations: string[];
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ operations: values });
+  };
+
+  const filtered = useMemo(() => {
+    const q = searchValue.toLowerCase();
+    return possibleOperations.filter(
+      (op) => op.toLowerCase().includes(q) || formatOperation(op).toLowerCase().includes(q)
+    );
+  }, [searchValue, possibleOperations]);
+
+  return (
+    <SelectProvider value={values("operations")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+          return true;
+        }}
+      >
+        <ComboBox placeholder="Filter by operation..." value={searchValue} />
+        <SelectList>
+          {filtered.map((op) => (
+            <SelectItem key={op} value={op} icon={<CommandLineIcon className="size-4" />}>
+              {formatOperation(op)}
+            </SelectItem>
+          ))}
+          {filtered.length === 0 && <SelectItem disabled>No operations found</SelectItem>}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
diff --git a/apps/webapp/app/components/metrics/ProvidersFilter.tsx b/apps/webapp/app/components/metrics/ProvidersFilter.tsx
new file mode 100644
index 00000000000..f73a6f00da3
--- /dev/null
+++ b/apps/webapp/app/components/metrics/ProvidersFilter.tsx
@@ -0,0 +1,123 @@
+import { ServerIcon } from "@heroicons/react/20/solid";
+import * as Ariakit from "@ariakit/react";
+import { type ReactNode, useMemo } from "react";
+import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import {
+  ComboBox,
+  SelectItem,
+  SelectList,
+  SelectPopover,
+  SelectProvider,
+  SelectTrigger,
+} from "~/components/primitives/Select";
+import { useSearchParams } from "~/hooks/useSearchParam";
+import { appliedSummary, FilterMenuProvider } from "~/components/runs/v3/SharedFilters";
+
+const shortcut = { key: "v" };
+
+interface ProvidersFilterProps {
+  possibleProviders: string[];
+}
+
+export function ProvidersFilter({ possibleProviders }: ProvidersFilterProps) {
+  const { values, replace, del } = useSearchParams();
+  const selectedProviders = values("providers");
+
+  if (selectedProviders.length === 0 || selectedProviders.every((v) => v === "")) {
+    return (
+      <FilterMenuProvider>
+        {(search, setSearch) => (
+          <ProvidersDropdown
+            trigger={
+              <SelectTrigger
+                icon={<ServerIcon className="size-4" />}
+                variant="secondary/small"
+                shortcut={shortcut}
+                tooltipTitle="Filter by provider"
+              >
+                <span className="ml-0.5">Providers</span>
+              </SelectTrigger>
+            }
+            searchValue={search}
+            clearSearchValue={() => setSearch("")}
+            possibleProviders={possibleProviders}
+          />
+        )}
+      </FilterMenuProvider>
+    );
+  }
+
+  return (
+    <FilterMenuProvider>
+      {(search, setSearch) => (
+        <ProvidersDropdown
+          trigger={
+            <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+              <AppliedFilter
+                label="Provider"
+                icon={<ServerIcon className="size-4" />}
+                value={appliedSummary(selectedProviders)}
+                onRemove={() => del(["providers"])}
+                variant="secondary/small"
+              />
+            </Ariakit.Select>
+          }
+          searchValue={search}
+          clearSearchValue={() => setSearch("")}
+          possibleProviders={possibleProviders}
+        />
+      )}
+    </FilterMenuProvider>
+  );
+}
+
+function ProvidersDropdown({
+  trigger,
+  clearSearchValue,
+  searchValue,
+  onClose,
+  possibleProviders,
+}: {
+  trigger: ReactNode;
+  clearSearchValue: () => void;
+  searchValue: string;
+  onClose?: () => void;
+  possibleProviders: string[];
+}) {
+  const { values, replace } = useSearchParams();
+
+  const handleChange = (values: string[]) => {
+    clearSearchValue();
+    replace({ providers: values });
+  };
+
+  const filtered = useMemo(() => {
+    return possibleProviders.filter((p) => p.toLowerCase().includes(searchValue.toLowerCase()));
+  }, [searchValue, possibleProviders]);
+
+  return (
+    <SelectProvider value={values("providers")} setValue={handleChange} virtualFocus={true}>
+      {trigger}
+      <SelectPopover
+        className="min-w-0 max-w-[min(360px,var(--popover-available-width))]"
+        hideOnEscape={() => {
+          if (onClose) {
+            onClose();
+            return false;
+          }
+          return true;
+        }}
+      >
+        <ComboBox placeholder="Filter by provider..." value={searchValue} />
+        <SelectList>
+          {filtered.map((provider) => (
+            <SelectItem key={provider} value={provider} icon={<ServerIcon className="size-4" />}>
+              {provider}
+            </SelectItem>
+          ))}
+          {filtered.length === 0 && <SelectItem disabled>No providers found</SelectItem>}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
diff --git a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
index 7158d2c2f04..2ec34614533 100644
--- a/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
+++ b/apps/webapp/app/presenters/v3/BuiltInDashboards.server.ts
@@ -217,7 +217,7 @@ const overviewDashboard: BuiltInDashboard = {
 const llmDashboard: BuiltInDashboard = {
   key: "llm",
   title: "AI Metrics",
-  filters: ["tasks", "models", "prompts"],
+  filters: ["tasks", "models", "prompts", "operations", "providers"],
   layout: {
     version: "1",
     layout: [
diff --git a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
index 1f71b8b69cf..dd2c58edb2e 100644
--- a/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/MetricDashboardPresenter.server.ts
@@ -58,7 +58,7 @@ export type CustomDashboard = {
   defaultPeriod: string;
 };
 
-export type BuiltInDashboardFilter = "tasks" | "queues" | "models" | "prompts";
+export type BuiltInDashboardFilter = "tasks" | "queues" | "models" | "prompts" | "operations" | "providers";
 
 export type BuiltInDashboard = {
   key: string;
diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
index afd25d0c09a..991caf6938a 100644
--- a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -56,6 +56,7 @@ export class PromptPresenter extends BasePresenter {
           select: {
             version: true,
             labels: true,
+            model: true,
           },
         },
       },
@@ -64,7 +65,12 @@ export class PromptPresenter extends BasePresenter {
 
     return prompts.map((p) => {
       const currentVersion = p.versions.find((v) => v.labels.includes("current"));
-      const hasOverride = p.versions.some((v) => v.labels.includes("override"));
+      const overrideVersion = p.versions.find((v) => v.labels.includes("override"));
+      const hasOverride = !!overrideVersion;
+
+      // Effective model: override > current version > prompt default
+      const effectiveModel =
+        overrideVersion?.model ?? currentVersion?.model ?? p.defaultModel;
 
       return {
         id: p.id,
@@ -72,7 +78,7 @@ export class PromptPresenter extends BasePresenter {
         slug: p.slug,
         description: p.description,
         tags: p.tags,
-        defaultModel: p.defaultModel,
+        defaultModel: effectiveModel,
         currentVersion: currentVersion ? { version: currentVersion.version } : null,
         hasOverride,
         updatedAt: p.updatedAt,
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
index e1897768003..6b52976bf7a 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
@@ -7,7 +7,9 @@ import { z } from "zod";
 import { PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
 import { ModelsFilter, type ModelOption } from "~/components/metrics/ModelsFilter";
+import { OperationsFilter } from "~/components/metrics/OperationsFilter";
 import { PromptsFilter } from "~/components/metrics/PromptsFilter";
+import { ProvidersFilter } from "~/components/metrics/ProvidersFilter";
 import { type WidgetData } from "~/components/metrics/QueryWidget";
 import { QueuesFilter } from "~/components/metrics/QueuesFilter";
 import { ScopeFilter } from "~/components/metrics/ScopeFilter";
@@ -106,6 +108,50 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     );
   }
 
+  let possibleOperations: string[] = [];
+  if (filters.includes("operations")) {
+    const queryFn = clickhouseClient.reader.query({
+      name: "getDistinctOperations",
+      query: `SELECT DISTINCT operation_id FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND operation_id != '' ORDER BY operation_id`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ operation_id: z.string() }),
+    });
+    const [error, rows] = await queryFn({
+      organizationId: project.organizationId,
+      projectId: project.id,
+      environmentId: environment.id,
+    });
+    if (!error) {
+      possibleOperations = rows.map((r) => r.operation_id);
+    }
+  }
+
+  let possibleProviders: string[] = [];
+  if (filters.includes("providers")) {
+    const queryFn = clickhouseClient.reader.query({
+      name: "getDistinctProviders",
+      query: `SELECT DISTINCT gen_ai_system FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND gen_ai_system != '' ORDER BY gen_ai_system`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ gen_ai_system: z.string() }),
+    });
+    const [error, rows] = await queryFn({
+      organizationId: project.organizationId,
+      projectId: project.id,
+      environmentId: environment.id,
+    });
+    if (!error) {
+      possibleProviders = rows.map((r) => r.gen_ai_system);
+    }
+  }
+
   return typedjson({
     ...dashboard,
     filters,
@@ -114,6 +160,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
       .sort((a, b) => a.slug.localeCompare(b.slug)),
     possibleModels,
     possiblePrompts,
+    possibleOperations,
+    possibleProviders,
   });
 };
 
@@ -127,6 +175,8 @@ export default function Page() {
     possibleTasks,
     possibleModels,
     possiblePrompts,
+    possibleOperations,
+    possibleProviders,
   } = useTypedLoaderData<typeof loader>();
 
   const organization = useOrganization();
@@ -157,6 +207,8 @@ export default function Page() {
             possibleTasks={possibleTasks}
             possibleModels={possibleModels}
             possiblePrompts={possiblePrompts}
+            possibleOperations={possibleOperations}
+            possibleProviders={possibleProviders}
           />
         </div>
       </PageBody>
@@ -173,6 +225,8 @@ export function MetricDashboard({
   possibleTasks,
   possibleModels,
   possiblePrompts,
+  possibleOperations,
+  possibleProviders,
   onLayoutChange,
   onEditWidget,
   onRenameWidget,
@@ -193,6 +247,10 @@ export function MetricDashboard({
   possibleModels?: ModelOption[];
   /** Possible prompt slugs for filtering */
   possiblePrompts?: string[];
+  /** Possible operations for filtering */
+  possibleOperations?: string[];
+  /** Possible providers for filtering */
+  possibleProviders?: string[];
   onLayoutChange?: (layout: LayoutItem[]) => void;
   onEditWidget?: (widgetId: string, widget: WidgetData) => void;
   onRenameWidget?: (widgetId: string, newTitle: string) => void;
@@ -221,6 +279,8 @@ export function MetricDashboard({
   const queues = values("queues").filter((v) => v !== "");
   const models = values("models").filter((v) => v !== "");
   const prompts = values("prompts").filter((v) => v !== "");
+  const operations = values("operations").filter((v) => v !== "");
+  const providers = values("providers").filter((v) => v !== "");
 
   const activeFilters = filterConfig ?? ["tasks", "queues"];
 
@@ -259,6 +319,12 @@ export function MetricDashboard({
         {activeFilters.includes("prompts") && (
           <PromptsFilter possiblePrompts={possiblePrompts ?? []} />
         )}
+        {activeFilters.includes("operations") && (
+          <OperationsFilter possibleOperations={possibleOperations ?? []} />
+        )}
+        {activeFilters.includes("providers") && (
+          <ProvidersFilter possibleProviders={possibleProviders ?? []} />
+        )}
         <TimeFilter
           defaultPeriod={defaultPeriod}
           labelName="Period"
@@ -315,6 +381,8 @@ export function MetricDashboard({
                     queues={queues.length > 0 ? queues : undefined}
                     responseModels={models.length > 0 ? models : undefined}
                     promptSlugs={prompts.length > 0 ? prompts : undefined}
+                    operations={operations.length > 0 ? operations : undefined}
+                    providers={providers.length > 0 ? providers : undefined}
                     config={widget.display}
                     organizationId={organization.id}
                     projectId={project.id}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 3b17678b2be..c8abcaebbe2 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -223,7 +223,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
   // Determine which version to scope generations to
   const versionParam = url.searchParams.get("version");
-  const selectedVersionNumber = versionParam ? Number(versionParam) : currentVersion?.version ?? 1;
+  const selectedVersionNumber = versionParam
+    ? Number(versionParam)
+    : overrideVersion?.version ?? currentVersion?.version ?? 1;
 
   const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
   const endTime = toTime ? new Date(toTime) : new Date();
@@ -415,6 +417,8 @@ export default function PromptDetailPage() {
   const versionParam = searchValue("version");
   const selectedVersion = versionParam
     ? versions.find((v) => v.version === Number(versionParam)) ?? versions[0]
+    : overrideVersion
+    ? versions.find((v) => v.id === overrideVersion.id) ?? versions[0]
     : currentVersion
     ? versions.find((v) => v.id === currentVersion.id) ?? versions[0]
     : versions[0];
@@ -679,7 +683,7 @@ export default function PromptDetailPage() {
 
               {/* Tab content */}
               <div className="overflow-y-auto px-3 py-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
-                {tab === "details" && <DetailsTab prompt={prompt} />}
+                {tab === "details" && <DetailsTab prompt={prompt} selectedVersion={selectedVersion} />}
                 {tab === "preview" && <PreviewTab prompt={prompt} content={content} />}
                 {tab === "versions" && (
                   <VersionsTab
@@ -699,9 +703,9 @@ export default function PromptDetailPage() {
         prompt={prompt}
         content={content}
         isEditingOverride={!!overrideVersion}
-        onSave={(textContent, commitMessage) => {
+        onSave={(textContent, commitMessage, model) => {
           const intent = overrideVersion ? "updateOverride" : "saveVersion";
-          fetcher.submit({ intent, textContent, commitMessage }, { method: "POST" });
+          fetcher.submit({ intent, textContent, commitMessage, model }, { method: "POST" });
           setOverrideDialogOpen(false);
         }}
       />
@@ -729,7 +733,7 @@ function OverrideDialog({
   };
   content: string;
   isEditingOverride: boolean;
-  onSave: (textContent: string, commitMessage: string) => void;
+  onSave: (textContent: string, commitMessage: string, model: string) => void;
 }) {
   const [editedContent, setEditedContent] = useState(content);
   const [commitMessage, setCommitMessage] = useState("");
@@ -762,7 +766,7 @@ function OverrideDialog({
   const undefinedVars = [...templateVars].filter((v) => !schemaVarNames.has(v));
   const unusedVars = variableFields.filter((f) => f.required && !templateVars.has(f.name));
 
-  const hasChanges = editedContent !== content;
+  const hasChanges = editedContent !== content || model !== (prompt.defaultModel ?? "");
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -879,7 +883,7 @@ function OverrideDialog({
           <Button
             variant="primary/medium"
             disabled={!hasChanges}
-            onClick={() => onSave(editedContent, commitMessage)}
+            onClick={() => onSave(editedContent, commitMessage, model)}
           >
             {isEditingOverride ? "Save override" : "Create override"}
           </Button>
@@ -893,9 +897,12 @@ function OverrideDialog({
 
 function DetailsTab({
   prompt,
+  selectedVersion,
 }: {
   prompt: ReturnType<typeof useTypedLoaderData<typeof loader>>["prompt"];
+  selectedVersion?: VersionData;
 }) {
+  const effectiveModel = selectedVersion?.model ?? prompt.defaultModel;
   return (
     <div className="space-y-4">
       <Property.Table>
@@ -911,10 +918,10 @@ function DetailsTab({
             <Property.Value>{prompt.description}</Property.Value>
           </Property.Item>
         )}
-        {prompt.defaultModel && (
+        {effectiveModel && (
           <Property.Item>
-            <Property.Label>Default model</Property.Label>
-            <Property.Value>{prompt.defaultModel}</Property.Value>
+            <Property.Label>Model</Property.Label>
+            <Property.Value>{effectiveModel}</Property.Value>
           </Property.Item>
         )}
         {prompt.defaultConfig && (
diff --git a/apps/webapp/app/routes/resources.metric.tsx b/apps/webapp/app/routes/resources.metric.tsx
index 9f6cea61917..b9bfd010128 100644
--- a/apps/webapp/app/routes/resources.metric.tsx
+++ b/apps/webapp/app/routes/resources.metric.tsx
@@ -46,6 +46,8 @@ const MetricWidgetQuery = z.object({
   queues: z.array(z.string()).optional(),
   responseModels: z.array(z.string()).optional(),
   promptSlugs: z.array(z.string()).optional(),
+  operations: z.array(z.string()).optional(),
+  providers: z.array(z.string()).optional(),
   tags: z.array(z.string()).optional(),
 });
 
@@ -78,6 +80,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     queues,
     responseModels,
     promptSlugs,
+    operations,
+    providers,
     tags,
   } = submission.data;
 
@@ -113,6 +117,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     queues,
     responseModels,
     promptSlugs,
+    operations,
+    providers,
     // Set higher concurrency if many widgets are on screen at once
     customOrgConcurrencyLimit: env.METRIC_WIDGET_DEFAULT_ORG_CONCURRENCY_LIMIT,
   });
@@ -268,6 +274,8 @@ export function MetricWidget({
     JSON.stringify(props.queues),
     JSON.stringify(props.responseModels),
     JSON.stringify(props.promptSlugs),
+    JSON.stringify(props.operations),
+    JSON.stringify(props.providers),
   ]);
 
   const data = response?.success
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 141bdc8b09c..6795261d26f 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -77,6 +77,10 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
   responseModels?: string[];
   /** Filter to specific prompt slugs */
   promptSlugs?: string[];
+  /** Filter to specific operations (e.g. ai.generateText.doGenerate) */
+  operations?: string[];
+  /** Filter to specific providers (e.g. openai.responses) */
+  providers?: string[];
   /** History options for saving query to billing/audit */
   history?: {
     /** Where the query originated from */
@@ -133,6 +137,8 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     queues,
     responseModels,
     promptSlugs,
+    operations,
+    providers,
     history,
     customOrgConcurrencyLimit,
     ...baseOptions
@@ -222,6 +228,10 @@ export async function executeQuery<TOut extends z.ZodSchema>(
         : undefined,
     prompt_slug:
       promptSlugs && promptSlugs.length > 0 ? { op: "in", values: promptSlugs } : undefined,
+    operation_id:
+      operations && operations.length > 0 ? { op: "in", values: operations } : undefined,
+    gen_ai_system:
+      providers && providers.length > 0 ? { op: "in", values: providers } : undefined,
   } satisfies Record<string, WhereClauseCondition | undefined>;
 
   // Compute the effective time range for timeBucket() interval calculation
diff --git a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
index bce2aeddecf..2c93db45849 100644
--- a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
+++ b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
@@ -1,5 +1,8 @@
+import { trail } from "agentcrumbs"; // @crumbs
 import type { CreateEventInput, LlmMetricsData } from "../eventRepository/eventRepository.types";
 
+const crumb = trail("webapp"); // @crumbs
+
 // Registry interface — matches ModelPricingRegistry from @internal/llm-pricing
 type CostRegistry = {
   isLoaded: boolean;
@@ -150,6 +153,20 @@ function enrichLlmMetrics(event: CreateEventInput): void {
     }
   }
 
+  // #region @crumbs
+  const telemetryKeys = Object.keys(props).filter((k) => k.startsWith("ai.telemetry.metadata."));
+  const promptKeys = Object.keys(props).filter((k) => k.includes("prompt"));
+  crumb("enrich-metadata-scan", {
+    spanId: event.spanId,
+    message: event.message,
+    telemetryKeyCount: telemetryKeys.length,
+    telemetryKeys: telemetryKeys.slice(0, 20),
+    promptKeys: promptKeys.slice(0, 20),
+    hasGenAiModel: !!props["gen_ai.response.model"],
+    allKeysSample: Object.keys(props).slice(0, 30),
+  });
+  // #endregion @crumbs
+
   for (const [key, value] of Object.entries(props)) {
     if (key.startsWith("ai.telemetry.metadata.") && typeof value === "string") {
       metadata[key.slice("ai.telemetry.metadata.".length)] = value;
@@ -202,7 +219,7 @@ function enrichLlmMetrics(event: CreateEventInput): void {
     tokensPerSecond: avgTokensPerSec,
     metadata,
     promptSlug: metadata["prompt.slug"] ?? "",
-    promptVersion: parseInt(metadata["prompt.version"] ?? "0", 10) || 0,
+    promptVersion: (() => { crumb("enrich-prompt-version", { spanId: event.spanId, metadataPromptSlug: metadata["prompt.slug"], metadataPromptVersion: metadata["prompt.version"], allMetadataKeys: Object.keys(metadata) }); return parseInt(metadata["prompt.version"] ?? "0", 10) || 0; })(), // @crumbs
   };
 
   event._llmMetrics = llmMetrics;
diff --git a/internal-packages/llm-pricing/src/default-model-prices.json b/internal-packages/llm-pricing/src/default-model-prices.json
index 4d2394ec082..62e9adbf03e 100644
--- a/internal-packages/llm-pricing/src/default-model-prices.json
+++ b/internal-packages/llm-pricing/src/default-model-prices.json
@@ -1358,9 +1358,9 @@
   {
     "id": "cluv2sjeo000008ih0fv23hi0",
     "modelName": "gemini-1.0-pro-latest",
-    "matchPattern": "(?i)^(google\/)?(gemini-1.0-pro-latest)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-1.0-pro-latest)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2024-04-11T10:27:46.517Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cluv2sjeo000008ih0fv23hi0_tier_default",
@@ -1378,9 +1378,9 @@
   {
     "id": "cluv2subq000108ih2mlrga6a",
     "modelName": "gemini-1.0-pro",
-    "matchPattern": "(?i)^(google\/)?(gemini-1.0-pro)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-1.0-pro)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2024-04-11T10:27:46.517Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cluv2subq000108ih2mlrga6a_tier_default",
@@ -1398,9 +1398,9 @@
   {
     "id": "cluv2sx04000208ihbek75lsz",
     "modelName": "gemini-1.0-pro-001",
-    "matchPattern": "(?i)^(google\/)?(gemini-1.0-pro-001)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-1.0-pro-001)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2024-04-11T10:27:46.517Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cluv2sx04000208ihbek75lsz_tier_default",
@@ -1418,9 +1418,9 @@
   {
     "id": "cluv2szw0000308ihch3n79x7",
     "modelName": "gemini-pro",
-    "matchPattern": "(?i)^(google\/)?(gemini-pro)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-pro)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2024-04-11T10:27:46.517Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cluv2szw0000308ihch3n79x7_tier_default",
@@ -1438,9 +1438,9 @@
   {
     "id": "cluv2t2x0000408ihfytl45l1",
     "modelName": "gemini-1.5-pro-latest",
-    "matchPattern": "(?i)^(google\/)?(gemini-1.5-pro-latest)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-1.5-pro-latest)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2024-04-11T10:27:46.517Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cluv2t2x0000408ihfytl45l1_tier_default",
@@ -2111,9 +2111,9 @@
   {
     "id": "cm6l8jdef0000tymz52sh0ql0",
     "modelName": "gemini-2.0-flash-001",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.0-flash-001)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.0-flash-001)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2025-02-06T11:11:35.241Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cm6l8jdef0000tymz52sh0ql0_tier_default",
@@ -2131,9 +2131,9 @@
   {
     "id": "cm6l8jfgh0000tymz52sh0ql1",
     "modelName": "gemini-2.0-flash-lite-preview-02-05",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.0-flash-lite-preview-02-05)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.0-flash-lite-preview-02-05)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2025-02-06T11:11:35.241Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cm6l8jfgh0000tymz52sh0ql1_tier_default",
@@ -2467,9 +2467,9 @@
   {
     "id": "cm7zsrs1327124dhjtb95w8f74",
     "modelName": "gemini-2.0-flash",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.0-flash)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.0-flash)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2025-04-22T10:11:35.241Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cm7zsrs1327124dhjtb95w8f74_tier_default",
@@ -2487,9 +2487,9 @@
   {
     "id": "cm7ztrs1327124dhjtb95w8f19",
     "modelName": "gemini-2.0-flash-lite-preview",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.0-flash-lite-preview)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.0-flash-lite-preview)(@[a-zA-Z0-9]+)?$",
     "createdAt": "2025-04-22T10:11:35.241Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-06T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cm7ztrs1327124dhjtb95w8f19_tier_default",
@@ -2795,9 +2795,9 @@
   {
     "id": "cmcnjkfwn000107l43bf5e8ax",
     "modelName": "gemini-2.5-flash",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.5-flash)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.5-flash)$",
     "createdAt": "2025-07-03T13:44:06.964Z",
-    "updatedAt": "2026-03-04T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cmcnjkfwn000107l43bf5e8ax_tier_default",
@@ -2814,6 +2814,7 @@
           "input_cached_tokens": 3e-8,
           "cached_content_token_count": 3e-8,
           "output": 0.0000025,
+          "output_text": 0.0000025,
           "output_modality_1": 0.0000025,
           "candidates_token_count": 0.0000025,
           "candidatesTokenCount": 0.0000025,
@@ -2828,9 +2829,9 @@
   {
     "id": "cmcnjkrfa000207l4fpnh5mnv",
     "modelName": "gemini-2.5-flash-lite",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.5-flash-lite)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.5-flash-lite)$",
     "createdAt": "2025-07-03T13:44:06.964Z",
-    "updatedAt": "2026-03-04T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cmcnjkrfa000207l4fpnh5mnv_tier_default",
@@ -2847,6 +2848,7 @@
           "input_cached_tokens": 2.5e-8,
           "cached_content_token_count": 2.5e-8,
           "output": 4e-7,
+          "output_text": 4e-7,
           "output_modality_1": 4e-7,
           "candidates_token_count": 4e-7,
           "candidatesTokenCount": 4e-7,
@@ -3361,9 +3363,9 @@
   {
     "id": "cmig1hb7i000104l72qrzgc6h",
     "modelName": "gemini-2.5-pro",
-    "matchPattern": "(?i)^(google\/)?(gemini-2.5-pro)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-2.5-pro)$",
     "createdAt": "2025-11-26T13:27:53.545Z",
-    "updatedAt": "2026-03-04T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cmig1hb7i000104l72qrzgc6h_tier_default",
@@ -3380,6 +3382,7 @@
           "input_cached_tokens": 0.125e-6,
           "cached_content_token_count": 0.125e-6,
           "output": 10e-6,
+          "output_text": 10e-6,
           "output_modality_1": 10e-6,
           "candidates_token_count": 10e-6,
           "candidatesTokenCount": 10e-6,
@@ -3410,6 +3413,7 @@
           "input_cached_tokens": 0.25e-6,
           "cached_content_token_count": 0.25e-6,
           "output": 15e-6,
+          "output_text": 15e-6,
           "output_modality_1": 15e-6,
           "candidates_token_count": 15e-6,
           "candidatesTokenCount": 15e-6,
@@ -3423,9 +3427,9 @@
   {
     "id": "cmig1wmep000404l7fh6q5uog",
     "modelName": "gemini-3-pro-preview",
-    "matchPattern": "(?i)^(google\/)?(gemini-3-pro-preview)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-3-pro-preview)$",
     "createdAt": "2025-11-26T13:27:53.545Z",
-    "updatedAt": "2025-12-12T15:00:06.513Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cmig1wmep000404l7fh6q5uog_tier_default",
@@ -3435,12 +3439,14 @@
         "conditions": [],
         "prices": {
           "input": 2e-6,
+          "input_text": 2e-6,
           "input_modality_1": 2e-6,
           "prompt_token_count": 2e-6,
           "promptTokenCount": 2e-6,
           "input_cached_tokens": 0.2e-6,
           "cached_content_token_count": 0.2e-6,
           "output": 12e-6,
+          "output_text": 12e-6,
           "output_modality_1": 12e-6,
           "candidates_token_count": 12e-6,
           "candidatesTokenCount": 12e-6,
@@ -3464,12 +3470,14 @@
         ],
         "prices": {
           "input": 4e-6,
+          "input_text": 4e-6,
           "input_modality_1": 4e-6,
           "prompt_token_count": 4e-6,
           "promptTokenCount": 4e-6,
           "input_cached_tokens": 0.4e-6,
           "cached_content_token_count": 0.4e-6,
           "output": 18e-6,
+          "output_text": 18e-6,
           "output_modality_1": 18e-6,
           "candidates_token_count": 18e-6,
           "candidatesTokenCount": 18e-6,
@@ -3483,9 +3491,9 @@
   {
     "id": "55106bba-a5dd-441b-bc0d-5652582b349d",
     "modelName": "gemini-3.1-pro-preview",
-    "matchPattern": "(?i)^(google\/)?(gemini-3.1-pro-preview(-customtools)?)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-3.1-pro-preview(-customtools)?)$",
     "createdAt": "2026-02-19T00:00:00.000Z",
-    "updatedAt": "2026-02-19T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "55106bba-a5dd-441b-bc0d-5652582b349d_tier_default",
@@ -3496,11 +3504,13 @@
         "prices": {
           "input": 2e-6,
           "input_modality_1": 2e-6,
+          "input_text": 2e-6,
           "prompt_token_count": 2e-6,
           "promptTokenCount": 2e-6,
           "input_cached_tokens": 0.2e-6,
           "cached_content_token_count": 0.2e-6,
           "output": 12e-6,
+          "output_text": 12e-6,
           "output_modality_1": 12e-6,
           "candidates_token_count": 12e-6,
           "candidatesTokenCount": 12e-6,
@@ -3525,11 +3535,13 @@
         "prices": {
           "input": 4e-6,
           "input_modality_1": 4e-6,
+          "input_text": 4e-6,
           "prompt_token_count": 4e-6,
           "promptTokenCount": 4e-6,
           "input_cached_tokens": 0.4e-6,
           "cached_content_token_count": 0.4e-6,
           "output": 18e-6,
+          "output_text": 18e-6,
           "output_modality_1": 18e-6,
           "candidates_token_count": 18e-6,
           "candidatesTokenCount": 18e-6,
@@ -3772,12 +3784,124 @@
       }
     ]
   },
+  {
+    "id": "4bf01a9f-663f-4302-a05c-b2b42c5348e3",
+    "modelName": "gpt-5.4-mini",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-mini)$",
+    "createdAt": "2026-03-18T00:00:00.000Z",
+    "updatedAt": "2026-03-18T00:00:00.000Z",
+    "tokenizerConfig": {
+      "tokensPerName": 1,
+      "tokenizerModel": "gpt-4",
+      "tokensPerMessage": 3
+    },
+    "tokenizerId": "openai",
+    "pricingTiers": [
+      {
+        "id": "4bf01a9f-663f-4302-a05c-b2b42c5348e3_tier_default",
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 0.75e-6,
+          "input_cached_tokens": 0.075e-6,
+          "input_cache_read": 0.075e-6,
+          "output": 4.5e-6
+        }
+      }
+    ]
+  },
+  {
+    "id": "3d8027df-7491-442e-9770-1363ab2452fc",
+    "modelName": "gpt-5.4-mini-2026-03-17",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-mini-2026-03-17)$",
+    "createdAt": "2026-03-18T00:00:00.000Z",
+    "updatedAt": "2026-03-18T00:00:00.000Z",
+    "tokenizerConfig": {
+      "tokensPerName": 1,
+      "tokenizerModel": "gpt-4",
+      "tokensPerMessage": 3
+    },
+    "tokenizerId": "openai",
+    "pricingTiers": [
+      {
+        "id": "3d8027df-7491-442e-9770-1363ab2452fc_tier_default",
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 0.75e-6,
+          "input_cached_tokens": 0.075e-6,
+          "input_cache_read": 0.075e-6,
+          "output": 4.5e-6
+        }
+      }
+    ]
+  },
+  {
+    "id": "2d83d130-d0f1-4b5d-be1c-7caf70b8e444",
+    "modelName": "gpt-5.4-nano",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-nano)$",
+    "createdAt": "2026-03-18T00:00:00.000Z",
+    "updatedAt": "2026-03-18T00:00:00.000Z",
+    "tokenizerConfig": {
+      "tokensPerName": 1,
+      "tokenizerModel": "gpt-4",
+      "tokensPerMessage": 3
+    },
+    "tokenizerId": "openai",
+    "pricingTiers": [
+      {
+        "id": "2d83d130-d0f1-4b5d-be1c-7caf70b8e444_tier_default",
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 0.2e-6,
+          "input_cached_tokens": 0.02e-6,
+          "input_cache_read": 0.02e-6,
+          "output": 1.25e-6
+        }
+      }
+    ]
+  },
+  {
+    "id": "33c7321b-c56e-45e9-9640-33ba3f5cb4fa",
+    "modelName": "gpt-5.4-nano-2026-03-17",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-nano-2026-03-17)$",
+    "createdAt": "2026-03-18T00:00:00.000Z",
+    "updatedAt": "2026-03-18T00:00:00.000Z",
+    "tokenizerConfig": {
+      "tokensPerName": 1,
+      "tokenizerModel": "gpt-4",
+      "tokensPerMessage": 3
+    },
+    "tokenizerId": "openai",
+    "pricingTiers": [
+      {
+        "id": "33c7321b-c56e-45e9-9640-33ba3f5cb4fa_tier_default",
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 0.2e-6,
+          "input_cached_tokens": 0.02e-6,
+          "input_cache_read": 0.02e-6,
+          "output": 1.25e-6
+        }
+      }
+    ]
+  },
   {
     "id": "cmjfoeykl000004l8ffzra8c7",
     "modelName": "gemini-3-flash-preview",
-    "matchPattern": "(?i)^(google\/)?(gemini-3-flash-preview)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-3-flash-preview)$",
     "createdAt": "2025-12-21T12:01:42.282Z",
-    "updatedAt": "2025-12-21T12:01:42.282Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "cmjfoeykl000004l8ffzra8c7_tier_default",
@@ -3787,12 +3911,14 @@
         "conditions": [],
         "prices": {
           "input": 0.5e-6,
+          "input_text": 0.5e-6,
           "input_modality_1": 0.5e-6,
           "prompt_token_count": 0.5e-6,
           "promptTokenCount": 0.5e-6,
           "input_cached_tokens": 0.05e-6,
           "cached_content_token_count": 0.05e-6,
           "output": 3e-6,
+          "output_text": 3e-6,
           "output_modality_1": 3e-6,
           "candidates_token_count": 3e-6,
           "candidatesTokenCount": 3e-6,
@@ -3806,9 +3932,9 @@
   {
     "id": "0707bef8-10c8-46e2-a871-0436f05f0b92",
     "modelName": "gemini-3.1-flash-lite-preview",
-    "matchPattern": "(?i)^(google\/)?(gemini-3.1-flash-lite-preview)$",
+    "matchPattern": "(?i)^(google(ai)?\/)?(gemini-3.1-flash-lite-preview)$",
     "createdAt": "2026-03-03T00:00:00.000Z",
-    "updatedAt": "2026-03-03T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "pricingTiers": [
       {
         "id": "0707bef8-10c8-46e2-a871-0436f05f0b92_tier_default",
@@ -3819,11 +3945,13 @@
         "prices": {
           "input": 0.25e-6,
           "input_modality_1": 0.25e-6,
+          "input_text": 0.25e-6,
           "prompt_token_count": 0.25e-6,
           "promptTokenCount": 0.25e-6,
           "input_cached_tokens": 0.025e-6,
           "cached_content_token_count": 0.025e-6,
           "output": 1.5e-6,
+          "output_text": 1.5e-6,
           "output_modality_1": 1.5e-6,
           "candidates_token_count": 1.5e-6,
           "candidatesTokenCount": 1.5e-6,
@@ -3840,7 +3968,7 @@
     "modelName": "gemini-live-2.5-flash-native-audio",
     "matchPattern": "(?i)^(google\/)?(gemini-live-2.5-flash-native-audio)$",
     "createdAt": "2026-03-16T00:00:00.000Z",
-    "updatedAt": "2026-03-16T00:00:00.000Z",
+    "updatedAt": "2026-03-19T00:00:00.000Z",
     "tokenizerConfig": null,
     "tokenizerId": null,
     "pricingTiers": [
diff --git a/internal-packages/llm-pricing/src/defaultPrices.ts b/internal-packages/llm-pricing/src/defaultPrices.ts
index 87013e55337..2bcc371da10 100644
--- a/internal-packages/llm-pricing/src/defaultPrices.ts
+++ b/internal-packages/llm-pricing/src/defaultPrices.ts
@@ -991,7 +991,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-1.0-pro-latest",
-    "matchPattern": "(?i)^(google/)?(gemini-1.0-pro-latest)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-1.0-pro-latest)(@[a-zA-Z0-9]+)?$",
     "startDate": "2024-04-11T10:27:46.517Z",
     "pricingTiers": [
       {
@@ -1008,7 +1008,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-1.0-pro",
-    "matchPattern": "(?i)^(google/)?(gemini-1.0-pro)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-1.0-pro)(@[a-zA-Z0-9]+)?$",
     "startDate": "2024-04-11T10:27:46.517Z",
     "pricingTiers": [
       {
@@ -1025,7 +1025,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-1.0-pro-001",
-    "matchPattern": "(?i)^(google/)?(gemini-1.0-pro-001)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-1.0-pro-001)(@[a-zA-Z0-9]+)?$",
     "startDate": "2024-04-11T10:27:46.517Z",
     "pricingTiers": [
       {
@@ -1042,7 +1042,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-pro",
-    "matchPattern": "(?i)^(google/)?(gemini-pro)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-pro)(@[a-zA-Z0-9]+)?$",
     "startDate": "2024-04-11T10:27:46.517Z",
     "pricingTiers": [
       {
@@ -1059,7 +1059,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-1.5-pro-latest",
-    "matchPattern": "(?i)^(google/)?(gemini-1.5-pro-latest)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-1.5-pro-latest)(@[a-zA-Z0-9]+)?$",
     "startDate": "2024-04-11T10:27:46.517Z",
     "pricingTiers": [
       {
@@ -1601,7 +1601,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.0-flash-001",
-    "matchPattern": "(?i)^(google/)?(gemini-2.0-flash-001)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.0-flash-001)(@[a-zA-Z0-9]+)?$",
     "startDate": "2025-02-06T11:11:35.241Z",
     "pricingTiers": [
       {
@@ -1618,7 +1618,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.0-flash-lite-preview-02-05",
-    "matchPattern": "(?i)^(google/)?(gemini-2.0-flash-lite-preview-02-05)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.0-flash-lite-preview-02-05)(@[a-zA-Z0-9]+)?$",
     "startDate": "2025-02-06T11:11:35.241Z",
     "pricingTiers": [
       {
@@ -1889,7 +1889,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.0-flash",
-    "matchPattern": "(?i)^(google/)?(gemini-2.0-flash)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.0-flash)(@[a-zA-Z0-9]+)?$",
     "startDate": "2025-04-22T10:11:35.241Z",
     "pricingTiers": [
       {
@@ -1906,7 +1906,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.0-flash-lite-preview",
-    "matchPattern": "(?i)^(google/)?(gemini-2.0-flash-lite-preview)(@[a-zA-Z0-9]+)?$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.0-flash-lite-preview)(@[a-zA-Z0-9]+)?$",
     "startDate": "2025-04-22T10:11:35.241Z",
     "pricingTiers": [
       {
@@ -2163,7 +2163,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.5-flash",
-    "matchPattern": "(?i)^(google/)?(gemini-2.5-flash)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.5-flash)$",
     "startDate": "2025-07-03T13:44:06.964Z",
     "pricingTiers": [
       {
@@ -2180,6 +2180,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
           "input_cached_tokens": 3e-8,
           "cached_content_token_count": 3e-8,
           "output": 0.0000025,
+          "output_text": 0.0000025,
           "output_modality_1": 0.0000025,
           "candidates_token_count": 0.0000025,
           "candidatesTokenCount": 0.0000025,
@@ -2193,7 +2194,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.5-flash-lite",
-    "matchPattern": "(?i)^(google/)?(gemini-2.5-flash-lite)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.5-flash-lite)$",
     "startDate": "2025-07-03T13:44:06.964Z",
     "pricingTiers": [
       {
@@ -2210,6 +2211,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
           "input_cached_tokens": 2.5e-8,
           "cached_content_token_count": 2.5e-8,
           "output": 4e-7,
+          "output_text": 4e-7,
           "output_modality_1": 4e-7,
           "candidates_token_count": 4e-7,
           "candidatesTokenCount": 4e-7,
@@ -2599,7 +2601,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-2.5-pro",
-    "matchPattern": "(?i)^(google/)?(gemini-2.5-pro)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-2.5-pro)$",
     "startDate": "2025-11-26T13:27:53.545Z",
     "pricingTiers": [
       {
@@ -2616,6 +2618,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
           "input_cached_tokens": 1.25e-7,
           "cached_content_token_count": 1.25e-7,
           "output": 0.00001,
+          "output_text": 0.00001,
           "output_modality_1": 0.00001,
           "candidates_token_count": 0.00001,
           "candidatesTokenCount": 0.00001,
@@ -2644,6 +2647,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
           "input_cached_tokens": 2.5e-7,
           "cached_content_token_count": 2.5e-7,
           "output": 0.000015,
+          "output_text": 0.000015,
           "output_modality_1": 0.000015,
           "candidates_token_count": 0.000015,
           "candidatesTokenCount": 0.000015,
@@ -2656,7 +2660,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-3-pro-preview",
-    "matchPattern": "(?i)^(google/)?(gemini-3-pro-preview)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-3-pro-preview)$",
     "startDate": "2025-11-26T13:27:53.545Z",
     "pricingTiers": [
       {
@@ -2666,12 +2670,14 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         "conditions": [],
         "prices": {
           "input": 0.000002,
+          "input_text": 0.000002,
           "input_modality_1": 0.000002,
           "prompt_token_count": 0.000002,
           "promptTokenCount": 0.000002,
           "input_cached_tokens": 2e-7,
           "cached_content_token_count": 2e-7,
           "output": 0.000012,
+          "output_text": 0.000012,
           "output_modality_1": 0.000012,
           "candidates_token_count": 0.000012,
           "candidatesTokenCount": 0.000012,
@@ -2693,12 +2699,14 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         ],
         "prices": {
           "input": 0.000004,
+          "input_text": 0.000004,
           "input_modality_1": 0.000004,
           "prompt_token_count": 0.000004,
           "promptTokenCount": 0.000004,
           "input_cached_tokens": 4e-7,
           "cached_content_token_count": 4e-7,
           "output": 0.000018,
+          "output_text": 0.000018,
           "output_modality_1": 0.000018,
           "candidates_token_count": 0.000018,
           "candidatesTokenCount": 0.000018,
@@ -2711,7 +2719,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-3.1-pro-preview",
-    "matchPattern": "(?i)^(google/)?(gemini-3.1-pro-preview(-customtools)?)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-3.1-pro-preview(-customtools)?)$",
     "startDate": "2026-02-19T00:00:00.000Z",
     "pricingTiers": [
       {
@@ -2722,11 +2730,13 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         "prices": {
           "input": 0.000002,
           "input_modality_1": 0.000002,
+          "input_text": 0.000002,
           "prompt_token_count": 0.000002,
           "promptTokenCount": 0.000002,
           "input_cached_tokens": 2e-7,
           "cached_content_token_count": 2e-7,
           "output": 0.000012,
+          "output_text": 0.000012,
           "output_modality_1": 0.000012,
           "candidates_token_count": 0.000012,
           "candidatesTokenCount": 0.000012,
@@ -2749,11 +2759,13 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         "prices": {
           "input": 0.000004,
           "input_modality_1": 0.000004,
+          "input_text": 0.000004,
           "prompt_token_count": 0.000004,
           "promptTokenCount": 0.000004,
           "input_cached_tokens": 4e-7,
           "cached_content_token_count": 4e-7,
           "output": 0.000018,
+          "output_text": 0.000018,
           "output_modality_1": 0.000018,
           "candidates_token_count": 0.000018,
           "candidatesTokenCount": 0.000018,
@@ -2924,9 +2936,85 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
       }
     ]
   },
+  {
+    "modelName": "gpt-5.4-mini",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-mini)$",
+    "startDate": "2026-03-18T00:00:00.000Z",
+    "pricingTiers": [
+      {
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 7.5e-7,
+          "input_cached_tokens": 7.5e-8,
+          "input_cache_read": 7.5e-8,
+          "output": 0.0000045
+        }
+      }
+    ]
+  },
+  {
+    "modelName": "gpt-5.4-mini-2026-03-17",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-mini-2026-03-17)$",
+    "startDate": "2026-03-18T00:00:00.000Z",
+    "pricingTiers": [
+      {
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 7.5e-7,
+          "input_cached_tokens": 7.5e-8,
+          "input_cache_read": 7.5e-8,
+          "output": 0.0000045
+        }
+      }
+    ]
+  },
+  {
+    "modelName": "gpt-5.4-nano",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-nano)$",
+    "startDate": "2026-03-18T00:00:00.000Z",
+    "pricingTiers": [
+      {
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 2e-7,
+          "input_cached_tokens": 2e-8,
+          "input_cache_read": 2e-8,
+          "output": 0.00000125
+        }
+      }
+    ]
+  },
+  {
+    "modelName": "gpt-5.4-nano-2026-03-17",
+    "matchPattern": "(?i)^(openai\\/)?(gpt-5.4-nano-2026-03-17)$",
+    "startDate": "2026-03-18T00:00:00.000Z",
+    "pricingTiers": [
+      {
+        "name": "Standard",
+        "isDefault": true,
+        "priority": 0,
+        "conditions": [],
+        "prices": {
+          "input": 2e-7,
+          "input_cached_tokens": 2e-8,
+          "input_cache_read": 2e-8,
+          "output": 0.00000125
+        }
+      }
+    ]
+  },
   {
     "modelName": "gemini-3-flash-preview",
-    "matchPattern": "(?i)^(google/)?(gemini-3-flash-preview)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-3-flash-preview)$",
     "startDate": "2025-12-21T12:01:42.282Z",
     "pricingTiers": [
       {
@@ -2936,12 +3024,14 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         "conditions": [],
         "prices": {
           "input": 5e-7,
+          "input_text": 5e-7,
           "input_modality_1": 5e-7,
           "prompt_token_count": 5e-7,
           "promptTokenCount": 5e-7,
           "input_cached_tokens": 5e-8,
           "cached_content_token_count": 5e-8,
           "output": 0.000003,
+          "output_text": 0.000003,
           "output_modality_1": 0.000003,
           "candidates_token_count": 0.000003,
           "candidatesTokenCount": 0.000003,
@@ -2954,7 +3044,7 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
   },
   {
     "modelName": "gemini-3.1-flash-lite-preview",
-    "matchPattern": "(?i)^(google/)?(gemini-3.1-flash-lite-preview)$",
+    "matchPattern": "(?i)^(google(ai)?/)?(gemini-3.1-flash-lite-preview)$",
     "startDate": "2026-03-03T00:00:00.000Z",
     "pricingTiers": [
       {
@@ -2965,11 +3055,13 @@ export const defaultModelPrices: DefaultModelDefinition[] = [
         "prices": {
           "input": 2.5e-7,
           "input_modality_1": 2.5e-7,
+          "input_text": 2.5e-7,
           "prompt_token_count": 2.5e-7,
           "promptTokenCount": 2.5e-7,
           "input_cached_tokens": 2.5e-8,
           "cached_content_token_count": 2.5e-8,
           "output": 0.0000015,
+          "output_text": 0.0000015,
           "output_modality_1": 0.0000015,
           "candidates_token_count": 0.0000015,
           "candidatesTokenCount": 0.0000015,

From 86beeb9c153378827af5df393ab15372e9ca3ac1 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 20 Mar 2026 22:57:20 +0000
Subject: [PATCH 03/24] feat: generations/metrics across all versions by
 default, add versions filter, show version in generation rows

---
 .../presenters/v3/PromptPresenter.server.ts   |  55 ++-
 .../route.tsx                                 | 316 +++++++++++-------
 ...nvParam.prompts.$promptSlug.generations.ts |  11 +-
 .../v3/utils/enrichCreatableEvents.server.ts  |  19 +-
 4 files changed, 254 insertions(+), 147 deletions(-)

diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
index 991caf6938a..1613f2a1f49 100644
--- a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -9,6 +9,7 @@ const GenerationRowSchema = z.object({
   operation_id: z.string(),
   task_identifier: z.string(),
   response_model: z.string(),
+  prompt_version: z.coerce.number(),
   input_tokens: z.coerce.number(),
   output_tokens: z.coerce.number(),
   total_cost: z.coerce.number(),
@@ -22,6 +23,7 @@ export type GenerationRow = {
   operation_id: string;
   task_identifier: string;
   response_model: string;
+  prompt_version: number;
   input_tokens: number;
   output_tokens: number;
   total_cost: number;
@@ -211,11 +213,14 @@ export class PromptPresenter extends BasePresenter {
   async listGenerations(options: {
     environmentId: string;
     promptSlug: string;
-    promptVersion: number;
+    promptVersions?: number[];
     startTime: Date;
     endTime: Date;
     cursor?: string;
     pageSize?: number;
+    responseModels?: string[];
+    operations?: string[];
+    providers?: string[];
   }): Promise<{ generations: GenerationRow[]; pagination: GenerationsPagination }> {
     const pageSize = options.pageSize ?? 25;
     const decodedCursor = options.cursor ? decodeCursor(options.cursor) : null;
@@ -226,26 +231,51 @@ export class PromptPresenter extends BasePresenter {
                  AND span_id < {cursorSpanId: String}))`
       : "";
 
+    const versionClause = options.promptVersions?.length
+      ? `AND prompt_version IN {promptVersions: Array(UInt32)}`
+      : "";
+    const modelClause = options.responseModels?.length
+      ? `AND response_model IN {responseModels: Array(String)}`
+      : "";
+    const operationClause = options.operations?.length
+      ? `AND operation_id IN {operations: Array(String)}`
+      : "";
+    const providerClause = options.providers?.length
+      ? `AND gen_ai_system IN {providers: Array(String)}`
+      : "";
+
+    // Build a unique query name based on which optional filters are active
+    const filterKey = [
+      decodedCursor ? "c" : "",
+      options.promptVersions?.length ? "v" : "",
+      options.responseModels?.length ? "m" : "",
+      options.operations?.length ? "o" : "",
+      options.providers?.length ? "p" : "",
+    ].join("");
+
     const queryFn = this.clickhouse.reader.query({
-      name: decodedCursor ? "promptGenerationsListCursor" : "promptGenerationsList",
+      name: `promptGenerationsList${filterKey}`,
       query: `SELECT
           run_id, span_id, operation_id, task_identifier, response_model,
+          prompt_version,
           input_tokens, output_tokens, total_cost,
           duration / 1000000 AS duration_ms,
           formatDateTime(start_time, '%Y-%m-%d %H:%i:%S') AS started_at
         FROM trigger_dev.llm_metrics_v1
         WHERE environment_id = {environmentId: String}
           AND prompt_slug = {promptSlug: String}
-          AND prompt_version = {promptVersion: UInt32}
+          ${versionClause}
           AND start_time >= parseDateTimeBestEffort({startTime: String})
           AND start_time <= parseDateTimeBestEffort({endTime: String})
           ${cursorClause}
+          ${modelClause}
+          ${operationClause}
+          ${providerClause}
         ORDER BY start_time DESC, span_id DESC
         LIMIT {fetchLimit: UInt32}`,
       params: z.object({
         environmentId: z.string(),
         promptSlug: z.string(),
-        promptVersion: z.number(),
         startTime: z.string(),
         endTime: z.string(),
         fetchLimit: z.number(),
@@ -255,6 +285,10 @@ export class PromptPresenter extends BasePresenter {
               cursorSpanId: z.string(),
             }
           : {}),
+        ...(options.promptVersions?.length ? { promptVersions: z.array(z.number()) } : {}),
+        ...(options.responseModels?.length ? { responseModels: z.array(z.string()) } : {}),
+        ...(options.operations?.length ? { operations: z.array(z.string()) } : {}),
+        ...(options.providers?.length ? { providers: z.array(z.string()) } : {}),
       }),
       schema: GenerationRowSchema,
     });
@@ -262,7 +296,6 @@ export class PromptPresenter extends BasePresenter {
     const queryParams: Record<string, unknown> = {
       environmentId: options.environmentId,
       promptSlug: options.promptSlug,
-      promptVersion: options.promptVersion,
       startTime: options.startTime.toISOString(),
       endTime: options.endTime.toISOString(),
       fetchLimit: pageSize + 1,
@@ -272,6 +305,18 @@ export class PromptPresenter extends BasePresenter {
       queryParams.cursorStartTime = decodedCursor.startTime;
       queryParams.cursorSpanId = decodedCursor.spanId;
     }
+    if (options.promptVersions?.length) {
+      queryParams.promptVersions = options.promptVersions;
+    }
+    if (options.responseModels?.length) {
+      queryParams.responseModels = options.responseModels;
+    }
+    if (options.operations?.length) {
+      queryParams.operations = options.operations;
+    }
+    if (options.providers?.length) {
+      queryParams.providers = options.providers;
+    }
 
     const [error, rows] = await queryFn(queryParams as any);
 
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index c8abcaebbe2..494c4d00f46 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -44,7 +44,11 @@ import {
   SelectTrigger,
 } from "~/components/primitives/Select";
 import { TextArea } from "~/components/primitives/TextArea";
+import { ModelsFilter } from "~/components/metrics/ModelsFilter";
+import { OperationsFilter } from "~/components/metrics/OperationsFilter";
+import { ProvidersFilter } from "~/components/metrics/ProvidersFilter";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
+import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
 import { TimeFilter } from "~/components/runs/v3/SharedFilters";
 import { SpanView } from "~/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
 import { useEnvironment } from "~/hooks/useEnvironment";
@@ -221,12 +225,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const fromTime = url.searchParams.get("from");
   const toTime = url.searchParams.get("to");
 
-  // Determine which version to scope generations to
-  const versionParam = url.searchParams.get("version");
-  const selectedVersionNumber = versionParam
-    ? Number(versionParam)
-    : overrideVersion?.version ?? currentVersion?.version ?? 1;
-
   const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
   const endTime = toTime ? new Date(toTime) : new Date();
 
@@ -234,12 +232,20 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   let generations: Awaited<ReturnType<typeof presenter.listGenerations>>["generations"] = [];
   let generationsPagination: { next?: string } = {};
   try {
+    const urlVersions = url.searchParams.getAll("versions").filter(Boolean).map(Number).filter((n) => !isNaN(n));
+    const urlModels = url.searchParams.getAll("models").filter(Boolean);
+    const urlOperations = url.searchParams.getAll("operations").filter(Boolean);
+    const urlProviders = url.searchParams.getAll("providers").filter(Boolean);
+
     const result = await presenter.listGenerations({
       environmentId: environment.id,
       promptSlug: prompt.slug,
-      promptVersion: selectedVersionNumber,
+      promptVersions: urlVersions.length > 0 ? urlVersions : undefined,
       startTime,
       endTime,
+      responseModels: urlModels.length > 0 ? urlModels : undefined,
+      operations: urlOperations.length > 0 ? urlOperations : undefined,
+      providers: urlProviders.length > 0 ? urlProviders : undefined,
     });
     generations = result.generations;
     generationsPagination = result.pagination;
@@ -247,12 +253,35 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     console.error("Prompt generations query exception:", e);
   }
 
-  const [resizableOuter, resizableVertical, resizableGenerations] = await Promise.all([
+  // Load distinct filter values and resizable snapshots in parallel
+  const distinctQuery = (col: string, name: string) =>
+    clickhouseClient.reader.query({
+      name,
+      query: `SELECT DISTINCT ${col} AS val FROM trigger_dev.llm_metrics_v1 WHERE environment_id = {environmentId: String} AND prompt_slug = {promptSlug: String} AND ${col} != '' ORDER BY val`,
+      params: z.object({ environmentId: z.string(), promptSlug: z.string() }),
+      schema: z.object({ val: z.string() }),
+    })({ environmentId: environment.id, promptSlug: prompt.slug });
+
+  const [
+    resizableOuter,
+    resizableVertical,
+    resizableGenerations,
+    [modelsErr, modelsRows],
+    [opsErr, opsRows],
+    [provsErr, provsRows],
+  ] = await Promise.all([
     getResizableSnapshot(request, "prompt-detail"),
     getResizableSnapshot(request, "prompt-vertical"),
     getResizableSnapshot(request, "prompt-generations"),
+    distinctQuery("response_model", "promptDistinctModels"),
+    distinctQuery("operation_id", "promptDistinctOperations"),
+    distinctQuery("gen_ai_system", "promptDistinctProviders"),
   ]);
 
+  const possibleModels = modelsErr ? [] : modelsRows.map((r) => r.val);
+  const possibleOperations = opsErr ? [] : opsRows.map((r) => r.val);
+  const possibleProviders = provsErr ? [] : provsRows.map((r) => r.val);
+
   return typedjson({
     resizable: { outer: resizableOuter, vertical: resizableVertical, generations: resizableGenerations },
     prompt: {
@@ -298,6 +327,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     organizationId: project.organizationId,
     projectId: project.id,
     environmentId: environment.id,
+    possibleModels,
+    possibleOperations,
+    possibleProviders,
   });
 };
 
@@ -398,6 +430,9 @@ export default function PromptDetailPage() {
     projectId,
     environmentId,
     resizable,
+    possibleModels,
+    possibleOperations,
+    possibleProviders,
   } = useTypedLoaderData<typeof loader>();
   const fetcher = useFetcher();
   const { value: searchValue, replace: replaceSearch } = useSearchParams();
@@ -433,13 +468,10 @@ export default function PromptDetailPage() {
   };
 
   const switchVersion = (versionNumber: number) => {
-    const v = versions.find((v) => v.version === versionNumber);
-    if (v) {
-      replaceSearch({
-        version: v.labels.includes("current") ? undefined : String(v.version),
-        tab,
-      });
-    }
+    replaceSearch({
+      version: String(versionNumber),
+      tab,
+    });
   };
 
   return (
@@ -567,7 +599,7 @@ export default function PromptDetailPage() {
 
               {/* Tabs panel */}
               <ResizablePanel id="prompt-tabs" min="100px">
-                <div className="grid h-full max-h-full grid-rows-[2rem_1fr] overflow-hidden">
+                <div className="grid h-full max-h-full grid-rows-[2.25rem_1fr] overflow-hidden">
                   {/* Tab bar */}
                   <div className="flex items-center justify-between border-b border-grid-dimmed px-3">
                     <TabContainer>
@@ -604,12 +636,20 @@ export default function PromptDetailPage() {
                         Metrics
                       </TabButton>
                     </TabContainer>
-                    <TimeFilter
-                      defaultPeriod="7d"
-                      labelName="Period"
-                      hideLabel
-                      valueClassName="text-text-bright"
-                    />
+                    <div className="flex items-center gap-1">
+                      <PromptVersionsFilter versions={versions} />
+                      <ModelsFilter
+                        possibleModels={possibleModels.map((m) => ({ model: m, system: "" }))}
+                      />
+                      <OperationsFilter possibleOperations={possibleOperations} />
+                      <ProvidersFilter possibleProviders={possibleProviders} />
+                      <TimeFilter
+                        defaultPeriod="7d"
+                        labelName="Period"
+                        hideLabel
+                        valueClassName="text-text-bright"
+                      />
+                    </div>
                   </div>
 
                   {/* Tab content */}
@@ -617,7 +657,6 @@ export default function PromptDetailPage() {
                     {contentTab === "generations" && (
                       <GenerationsTab
                         promptSlug={prompt.slug}
-                        promptVersion={selectedVersion?.version ?? 1}
                         initialGenerations={generations}
                         initialPagination={generationsPagination}
                         selectedSpan={selectedSpan}
@@ -630,7 +669,6 @@ export default function PromptDetailPage() {
                       <div className="h-full overflow-y-auto p-3 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
                         <MetricsTab
                           prompt={prompt}
-                          versions={versions}
                           organizationId={organizationId}
                           projectId={projectId}
                           environmentId={environmentId}
@@ -1109,7 +1147,6 @@ type GenerationRow = {
 
 function GenerationsTab({
   promptSlug,
-  promptVersion,
   initialGenerations,
   initialPagination,
   selectedSpan,
@@ -1117,7 +1154,6 @@ function GenerationsTab({
   generationsSnapshot,
 }: {
   promptSlug: string;
-  promptVersion: number;
   initialGenerations: GenerationRow[];
   initialPagination: { next?: string };
   selectedSpan: { runId: string; spanId: string } | null;
@@ -1144,9 +1180,15 @@ function GenerationsTab({
   }/prompts/${encodeURIComponent(promptSlug)}/generations`;
 
   // Track filter state to reset on change
-  const filterKey = `${searchValue("version") ?? ""}-${searchValue("period") ?? "7d"}-${
+  const { values: filterValues } = useSearchParams();
+  const models = filterValues("models").filter((v) => v !== "");
+  const operations = filterValues("operations").filter((v) => v !== "");
+  const providers = filterValues("providers").filter((v) => v !== "");
+
+  const versionFilters = filterValues("versions").filter((v) => v !== "");
+  const filterKey = `${versionFilters.join(",")}-${searchValue("period") ?? "7d"}-${
     searchValue("from") ?? ""
-  }-${searchValue("to") ?? ""}`;
+  }-${searchValue("to") ?? ""}-${models.join(",")}-${operations.join(",")}-${providers.join(",")}`;
   const prevFilterKeyRef = useRef(filterKey);
 
   // Reset when filters change (loader re-runs with new initial data)
@@ -1189,26 +1231,29 @@ function GenerationsTab({
     callback: () => {
       if (pollFetcher.state !== "idle") return;
       const params = new URLSearchParams();
-      params.set("version", String(promptVersion));
+      for (const v of versionFilters) params.append("versions", v);
       params.set("period", searchValue("period") ?? "7d");
       const from = searchValue("from");
       const to = searchValue("to");
       if (from) params.set("from", from);
       if (to) params.set("to", to);
+      for (const m of models) params.append("models", m);
+      for (const o of operations) params.append("operations", o);
+      for (const p of providers) params.append("providers", p);
       pollFetcher.load(`${resourcePath}?${params.toString()}`);
     },
   });
 
-  // Check poll results for new generations
+  // Check poll results for new generations — only react to new poll data, not generation list changes
+  const lastPollDataRef = useRef(pollFetcher.data);
   useEffect(() => {
-    if (pollFetcher.data && pollFetcher.state === "idle") {
+    if (pollFetcher.data && pollFetcher.state === "idle" && pollFetcher.data !== lastPollDataRef.current) {
+      lastPollDataRef.current = pollFetcher.data;
       const existingIds = new Set(generations.map((g) => g.span_id));
       const newCount = pollFetcher.data.generations.filter(
         (g) => !existingIds.has(g.span_id)
       ).length;
-      if (newCount > 0) {
-        setNewGenerationCount(newCount);
-      }
+      setNewGenerationCount(newCount);
     }
   }, [pollFetcher.data, pollFetcher.state, generations]);
 
@@ -1231,12 +1276,15 @@ function GenerationsTab({
     if (!nextCursor || fetcher.state !== "idle") return;
 
     const params = new URLSearchParams();
-    params.set("version", String(promptVersion));
+    for (const v of versionFilters) params.append("versions", v);
     params.set("period", searchValue("period") ?? "7d");
     const from = searchValue("from");
     const to = searchValue("to");
     if (from) params.set("from", from);
     if (to) params.set("to", to);
+    for (const m of models) params.append("models", m);
+    for (const o of operations) params.append("operations", o);
+    for (const p of providers) params.append("providers", p);
     params.set("cursor", nextCursor);
     fetcher.load(`${resourcePath}?${params.toString()}`);
   }, [
@@ -1244,7 +1292,10 @@ function GenerationsTab({
     fetcher,
     searchValue,
     resourcePath,
-    promptVersion,
+    versionFilters,
+    models,
+    operations,
+    providers,
   ]);
 
   // Debounced loading spinner
@@ -1389,6 +1440,7 @@ function GenerationsTab({
                 </div>
                 <div className="mt-0.5 flex items-center justify-between">
                   <div className="flex items-center gap-3 text-text-dimmed">
+                    <span className="text-charcoal-400">v{gen.prompt_version}</span>
                     <span>{gen.response_model}</span>
                     <span>{gen.input_tokens + gen.output_tokens} tokens</span>
                     <span>{formatCost(gen.total_cost)}</span>
@@ -1444,7 +1496,6 @@ function formatCost(cost: number): string {
 
 function MetricsTab({
   prompt,
-  versions,
   organizationId,
   projectId,
   environmentId,
@@ -1453,7 +1504,6 @@ function MetricsTab({
   to,
 }: {
   prompt: { slug: string };
-  versions: VersionData[];
   organizationId: string;
   projectId: string;
   environmentId: string;
@@ -1461,6 +1511,15 @@ function MetricsTab({
   from: string | null;
   to: string | null;
 }) {
+  const { values: filterValues } = useSearchParams();
+  const versionFilters = filterValues("versions").filter((v) => v !== "");
+  const models = filterValues("models").filter((v) => v !== "");
+  const operations = filterValues("operations").filter((v) => v !== "");
+  const providers = filterValues("providers").filter((v) => v !== "");
+
+  const versionFilter =
+    versionFilters.length > 0 ? ` AND prompt_version IN (${versionFilters.join(",")})` : "";
+
   const widgetProps = {
     organizationId,
     projectId,
@@ -1469,6 +1528,9 @@ function MetricsTab({
     period,
     from,
     to,
+    responseModels: models.length > 0 ? models : undefined,
+    operations: operations.length > 0 ? operations : undefined,
+    providers: providers.length > 0 ? providers : undefined,
   };
 
   return (
@@ -1479,7 +1541,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-generations`}
             title="Total"
-            query={`SELECT count() AS generations FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            query={`SELECT count() AS generations FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
             config={{
               type: "bignumber",
               column: "generations",
@@ -1493,7 +1555,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-tokens`}
             title="Avg input tokens"
-            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_input",
@@ -1507,7 +1569,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-cost`}
             title="Avg input cost"
-            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_cost",
@@ -1521,7 +1583,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-latency`}
             title="Avg latency"
-            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'`}
+            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_ms",
@@ -1537,7 +1599,6 @@ function MetricsTab({
       {/* Version performance */}
       <VersionPerformanceSection
         promptSlug={prompt.slug}
-        versions={versions}
         organizationId={organizationId}
         projectId={projectId}
         environmentId={environmentId}
@@ -1549,73 +1610,10 @@ function MetricsTab({
   );
 }
 
-// ─── Version Filter ──────────────────────────────────────
-
-function VersionFilter({
-  versions,
-  selectedVersions,
-  onChange,
-}: {
-  versions: VersionData[];
-  selectedVersions: string[];
-  onChange: (versions: string[]) => void;
-}) {
-  if (selectedVersions.length === 0 || selectedVersions.every((v) => v === "")) {
-    return (
-      <SelectProvider value={selectedVersions} setValue={onChange} virtualFocus={true}>
-        <SelectTrigger variant="tertiary/small" tooltipTitle="Filter by version">
-          Version
-        </SelectTrigger>
-        <SelectPopover>
-          <SelectList>
-            {versions.map((v) => (
-              <SelectItem key={v.id} value={String(v.version)}>
-                v{v.version}
-                {v.labels.includes("current") ? " (current)" : ""}
-                {v.labels.includes("latest") ? " (latest)" : ""}
-              </SelectItem>
-            ))}
-          </SelectList>
-        </SelectPopover>
-      </SelectProvider>
-    );
-  }
-
-  const summary =
-    selectedVersions.length === 1
-      ? `v${selectedVersions[0]}`
-      : `${selectedVersions.length} versions`;
-
-  return (
-    <SelectProvider value={selectedVersions} setValue={onChange} virtualFocus={true}>
-      <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
-        <AppliedFilter
-          label="Version"
-          value={summary}
-          onRemove={() => onChange([])}
-          variant="secondary/small"
-        />
-      </Ariakit.Select>
-      <SelectPopover>
-        <SelectList>
-          {versions.map((v) => (
-            <SelectItem key={v.id} value={String(v.version)}>
-              v{v.version}
-              {v.labels.includes("current") ? " (current)" : ""}
-              {v.labels.includes("latest") ? " (latest)" : ""}
-            </SelectItem>
-          ))}
-        </SelectList>
-      </SelectPopover>
-    </SelectProvider>
-  );
-}
-
 // ─── Version Performance Section ─────────────────────────
 
 function VersionPerformanceSection({
   promptSlug,
-  versions,
   organizationId,
   projectId,
   environmentId,
@@ -1624,7 +1622,6 @@ function VersionPerformanceSection({
   to,
 }: {
   promptSlug: string;
-  versions: VersionData[];
   organizationId: string;
   projectId: string;
   environmentId: string;
@@ -1632,10 +1629,14 @@ function VersionPerformanceSection({
   from: string | null;
   to: string | null;
 }) {
-  const [selectedVersions, setSelectedVersions] = useState<string[]>([]);
+  const { values: filterValues } = useSearchParams();
+  const versionFilters = filterValues("versions").filter((v) => v !== "");
+  const models = filterValues("models").filter((v) => v !== "");
+  const operations = filterValues("operations").filter((v) => v !== "");
+  const providers = filterValues("providers").filter((v) => v !== "");
 
   const versionFilter =
-    selectedVersions.length > 0 ? ` AND prompt_version IN (${selectedVersions.join(",")})` : "";
+    versionFilters.length > 0 ? ` AND prompt_version IN (${versionFilters.join(",")})` : "";
 
   const widgetProps = {
     organizationId,
@@ -1645,24 +1646,21 @@ function VersionPerformanceSection({
     period,
     from,
     to,
+    responseModels: models.length > 0 ? models : undefined,
+    operations: operations.length > 0 ? operations : undefined,
+    providers: providers.length > 0 ? providers : undefined,
   };
 
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-2">
-        <Header3>Version performance</Header3>
-        <VersionFilter
-          versions={versions}
-          selectedVersions={selectedVersions}
-          onChange={setSelectedVersions}
-        />
       </div>
 
       <div className="grid grid-cols-2 gap-3">
         {/* Row 1: Latency + TTFC */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-latency-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-latency-${versionFilters.join(",")}`}
             title="Latency p50 / p95"
             query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1681,7 +1679,7 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-ttfc-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-ttfc-${versionFilters.join(",")}`}
             title="TTFC p50 / p95"
             query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND ms_to_first_chunk > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1701,7 +1699,7 @@ function VersionPerformanceSection({
         {/* Row 2: Input tokens + Input cost */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-input-tokens-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-input-tokens-${versionFilters.join(",")}`}
             title="Input tokens p50 / p95"
             query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1720,7 +1718,7 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-input-cost-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-input-cost-${versionFilters.join(",")}`}
             title="Input cost per 1k tokens (p50 / p95)"
             query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND input_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1740,7 +1738,7 @@ function VersionPerformanceSection({
         {/* Row 3: Output tokens + Output cost */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-output-tokens-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-output-tokens-${versionFilters.join(",")}`}
             title="Output tokens p50 / p95"
             query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1759,7 +1757,7 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-output-cost-${selectedVersions.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-output-cost-${versionFilters.join(",")}`}
             title="Output cost per 1k tokens (p50 / p95)"
             query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND output_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
@@ -1780,7 +1778,7 @@ function VersionPerformanceSection({
 
       <div className="h-48">
         <MetricWidget
-          widgetKey={`prompt-${promptSlug}-perf-versions-table-${selectedVersions.join(",")}`}
+          widgetKey={`prompt-${promptSlug}-perf-versions-table-${versionFilters.join(",")}`}
           title="Version summary"
           query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY prompt_version ORDER BY prompt_version DESC`}
           config={{ type: "table", prettyFormatting: true, sorting: [] }}
@@ -1791,6 +1789,80 @@ function VersionPerformanceSection({
   );
 }
 
+// ─── Prompt Versions Filter ──────────────────────────────
+
+function PromptVersionsFilter({ versions }: { versions: VersionData[] }) {
+  const { values, replace, del } = useSearchParams();
+  const selected = values("versions");
+
+  const handleChange = (newValues: string[]) => {
+    replace({ versions: newValues });
+  };
+
+  if (selected.length === 0 || selected.every((v) => v === "")) {
+    return (
+      <SelectProvider value={[]} setValue={handleChange} virtualFocus={true}>
+        <SelectTrigger
+          icon={
+            <svg className="size-4">
+              <use xlinkHref={`${tablerSpritePath}#tabler-file-text-ai`} />
+            </svg>
+          }
+          variant="secondary/small"
+          tooltipTitle="Filter by version"
+        >
+          <span className="ml-0.5">Versions</span>
+        </SelectTrigger>
+        <SelectPopover className="min-w-0 max-w-[min(240px,var(--popover-available-width))]">
+          <SelectList>
+            {versions.map((v) => (
+              <SelectItem key={v.version} value={String(v.version)}>
+                v{v.version}
+                {v.labels.includes("current") ? " (current)" : ""}
+                {v.labels.includes("override") ? " (override)" : ""}
+              </SelectItem>
+            ))}
+          </SelectList>
+        </SelectPopover>
+      </SelectProvider>
+    );
+  }
+
+  const summary =
+    selected.length === 1
+      ? `v${selected[0]}`
+      : `${selected.length} versions`;
+
+  return (
+    <SelectProvider value={selected} setValue={handleChange} virtualFocus={true}>
+      <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
+        <AppliedFilter
+          label="Version"
+          icon={
+            <svg className="size-4">
+              <use xlinkHref={`${tablerSpritePath}#tabler-file-text-ai`} />
+            </svg>
+          }
+          value={summary}
+          onRemove={() => del(["versions"])}
+          variant="secondary/small"
+        />
+      </Ariakit.Select>
+      <SelectPopover className="min-w-0 max-w-[min(240px,var(--popover-available-width))]">
+        <SelectList>
+          {versions.map((v) => (
+            <SelectItem key={v.version} value={String(v.version)}>
+              v{v.version}
+              {v.labels.includes("current") ? " (current)" : ""}
+              {v.labels.includes("override") ? " (override)" : ""}
+            </SelectItem>
+          ))}
+        </SelectList>
+      </SelectPopover>
+    </SelectProvider>
+  );
+}
+
 // ─── Versions Tab ────────────────────────────────────────
 
 function VersionsTab({
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
index 66903d95b05..e9786f3b852 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
@@ -50,7 +50,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   if (!environment) throw new Response("Environment not found", { status: 404 });
 
   const url = new URL(request.url);
-  const version = Number(url.searchParams.get("version") ?? "1");
+  const versions = url.searchParams.getAll("versions").filter(Boolean).map(Number).filter((n) => !isNaN(n));
   const period = url.searchParams.get("period") ?? "7d";
   const fromTime = url.searchParams.get("from");
   const toTime = url.searchParams.get("to");
@@ -60,14 +60,21 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
   const endTime = toTime ? new Date(toTime) : new Date();
 
+  const models = url.searchParams.getAll("models").filter(Boolean);
+  const operations = url.searchParams.getAll("operations").filter(Boolean);
+  const providers = url.searchParams.getAll("providers").filter(Boolean);
+
   const presenter = new PromptPresenter(clickhouseClient);
   const result = await presenter.listGenerations({
     environmentId: environment.id,
     promptSlug,
-    promptVersion: version,
+    promptVersions: versions.length > 0 ? versions : undefined,
     startTime,
     endTime,
     cursor: cursorParam,
+    responseModels: models.length > 0 ? models : undefined,
+    operations: operations.length > 0 ? operations : undefined,
+    providers: providers.length > 0 ? providers : undefined,
   });
 
   return json(result satisfies GenerationsResponse);
diff --git a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
index 2c93db45849..bce2aeddecf 100644
--- a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
+++ b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
@@ -1,8 +1,5 @@
-import { trail } from "agentcrumbs"; // @crumbs
 import type { CreateEventInput, LlmMetricsData } from "../eventRepository/eventRepository.types";
 
-const crumb = trail("webapp"); // @crumbs
-
 // Registry interface — matches ModelPricingRegistry from @internal/llm-pricing
 type CostRegistry = {
   isLoaded: boolean;
@@ -153,20 +150,6 @@ function enrichLlmMetrics(event: CreateEventInput): void {
     }
   }
 
-  // #region @crumbs
-  const telemetryKeys = Object.keys(props).filter((k) => k.startsWith("ai.telemetry.metadata."));
-  const promptKeys = Object.keys(props).filter((k) => k.includes("prompt"));
-  crumb("enrich-metadata-scan", {
-    spanId: event.spanId,
-    message: event.message,
-    telemetryKeyCount: telemetryKeys.length,
-    telemetryKeys: telemetryKeys.slice(0, 20),
-    promptKeys: promptKeys.slice(0, 20),
-    hasGenAiModel: !!props["gen_ai.response.model"],
-    allKeysSample: Object.keys(props).slice(0, 30),
-  });
-  // #endregion @crumbs
-
   for (const [key, value] of Object.entries(props)) {
     if (key.startsWith("ai.telemetry.metadata.") && typeof value === "string") {
       metadata[key.slice("ai.telemetry.metadata.".length)] = value;
@@ -219,7 +202,7 @@ function enrichLlmMetrics(event: CreateEventInput): void {
     tokensPerSecond: avgTokensPerSec,
     metadata,
     promptSlug: metadata["prompt.slug"] ?? "",
-    promptVersion: (() => { crumb("enrich-prompt-version", { spanId: event.spanId, metadataPromptSlug: metadata["prompt.slug"], metadataPromptVersion: metadata["prompt.version"], allMetadataKeys: Object.keys(metadata) }); return parseInt(metadata["prompt.version"] ?? "0", 10) || 0; })(), // @crumbs
+    promptVersion: parseInt(metadata["prompt.version"] ?? "0", 10) || 0,
   };
 
   event._llmMetrics = llmMetrics;

From db26f63f1cfaf6832d0b8fcbfc3bcd211a68209b Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Fri, 20 Mar 2026 23:11:23 +0000
Subject: [PATCH 04/24] feat: prompts list redesign with separate columns, bar
 sparklines, version/override display, breadcrumb fix

---
 .../presenters/v3/PromptPresenter.server.ts   |  1 +
 .../route.tsx                                 |  7 +-
 .../route.tsx                                 | 65 +++++++++----------
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
index 1613f2a1f49..1f84d002afd 100644
--- a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -82,6 +82,7 @@ export class PromptPresenter extends BasePresenter {
         tags: p.tags,
         defaultModel: effectiveModel,
         currentVersion: currentVersion ? { version: currentVersion.version } : null,
+        overrideVersion: overrideVersion ? { version: overrideVersion.version } : null,
         hasOverride,
         updatedAt: p.updatedAt,
       };
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 494c4d00f46..2a914778842 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -69,7 +69,7 @@ import { MetricWidget } from "~/routes/resources.metric";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { InlineCode } from "~/components/code/InlineCode";
 import { TextLink } from "~/components/primitives/TextLink";
-import { EnvironmentParamSchema, v3RunSpanPath } from "~/utils/pathBuilder";
+import { EnvironmentParamSchema, v3PromptsPath, v3RunSpanPath } from "~/utils/pathBuilder";
 import { z } from "zod";
 
 const ParamSchema = EnvironmentParamSchema.extend({
@@ -434,6 +434,9 @@ export default function PromptDetailPage() {
     possibleOperations,
     possibleProviders,
   } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
   const fetcher = useFetcher();
   const { value: searchValue, replace: replaceSearch } = useSearchParams();
 
@@ -486,7 +489,7 @@ export default function PromptDetailPage() {
               </span>
             </div>
           }
-          backButton={{ to: "..", text: "Prompts" }}
+          backButton={{ to: v3PromptsPath(organization, project, environment), text: "Prompts" }}
         />
         <PageAccessories>
           <div className="flex items-center gap-2">
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
index 0100537b49f..b8b9dde474d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx
@@ -1,11 +1,10 @@
 import { type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Area, AreaChart, ResponsiveContainer } from "recharts";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PromptsNone } from "~/components/BlankStatePanels";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
-import { Badge } from "~/components/primitives/Badge";
 import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import {
@@ -87,19 +86,22 @@ export default function PromptsPage() {
           <TableHeader>
             <TableRow>
               <TableHeaderCell>ID</TableHeaderCell>
-              <TableHeaderCell>Prompt</TableHeaderCell>
+              <TableHeaderCell>Slug</TableHeaderCell>
+              <TableHeaderCell>Description</TableHeaderCell>
               <TableHeaderCell>Model</TableHeaderCell>
-              <TableHeaderCell>Current</TableHeaderCell>
+              <TableHeaderCell>Version</TableHeaderCell>
               <TableHeaderCell>Usage (24h)</TableHeaderCell>
               <TableHeaderCell alignment="right">Last updated</TableHeaderCell>
             </TableRow>
           </TableHeader>
           <TableBody>
             {prompts.length === 0 ? (
-              <TableBlankRow colSpan={6}>No prompts found</TableBlankRow>
+              <TableBlankRow colSpan={7}>No prompts found</TableBlankRow>
             ) : (
               prompts.map((prompt) => {
                 const path = `${v3PromptsPath(organization, project, environment)}/${prompt.slug}`;
+                const activeVersion = prompt.overrideVersion ?? prompt.currentVersion;
+                const isOverride = !!prompt.overrideVersion;
 
                 return (
                   <TableRow key={prompt.id}>
@@ -107,19 +109,18 @@ export default function PromptsPage() {
                       <TruncatedCopyableValue value={prompt.friendlyId} />
                     </TableCell>
                     <TableCell to={path}>
-                      <div className="flex flex-col">
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-text-bright">{prompt.slug}</span>
-                          {prompt.hasOverride && (
-                            <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
-                              override
-                            </Badge>
-                          )}
-                        </div>
-                        {prompt.description && (
-                          <span className="text-xs text-text-dimmed">{prompt.description}</span>
-                        )}
-                      </div>
+                      <span className="text-text-bright">{prompt.slug}</span>
+                    </TableCell>
+                    <TableCell to={path}>
+                      {prompt.description ? (
+                        <span className="text-text-dimmed" title={prompt.description.length > 80 ? prompt.description : undefined}>
+                          {prompt.description.length > 80
+                            ? prompt.description.slice(0, 80) + "..."
+                            : prompt.description}
+                        </span>
+                      ) : (
+                        <span className="text-charcoal-500">-</span>
+                      )}
                     </TableCell>
                     <TableCell to={path}>
                       <span className="text-text-dimmed">
@@ -127,11 +128,15 @@ export default function PromptsPage() {
                       </span>
                     </TableCell>
                     <TableCell to={path}>
-                      {prompt.currentVersion ? (
+                      {activeVersion ? (
                         <div className="flex items-center gap-1.5">
-                          <div className="size-1.5 rounded-full bg-green-500" />
+                          <div
+                            className={`size-1.5 rounded-full ${
+                              isOverride ? "bg-amber-400" : "bg-green-500"
+                            }`}
+                          />
                           <span className="text-text-bright">
-                            v{prompt.currentVersion.version}
+                            v{activeVersion.version}
                           </span>
                         </div>
                       ) : (
@@ -167,22 +172,14 @@ function UsageSparkline({ data }: { data?: number[] }) {
     <div className="flex items-center gap-2">
       <div className="h-6 w-16">
         <ResponsiveContainer width="100%" height="100%">
-          <AreaChart data={chartData} margin={{ top: 1, right: 0, bottom: 1, left: 0 }}>
-            <defs>
-              <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
-              </linearGradient>
-            </defs>
-            <Area
-              type="monotone"
+          <BarChart data={chartData} margin={{ top: 1, right: 0, bottom: 1, left: 0 }}>
+            <Bar
               dataKey="value"
-              stroke="#3b82f6"
-              strokeWidth={1.5}
-              fill="url(#sparkFill)"
+              fill="#3b82f6"
+              radius={[1, 1, 0, 0]}
               isAnimationActive={false}
             />
-          </AreaChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
       <span className="text-xs tabular-nums text-text-dimmed">{total.toLocaleString()}</span>

From 8d5b28f36364a846955cefc4416275aac99f532c Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sat, 21 Mar 2026 08:03:19 +0000
Subject: [PATCH 05/24] feat: full-width override banner, cleaner header for
 prompt detail page

---
 .../route.tsx                                 | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 2a914778842..e4eccd92c5b 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -497,13 +497,11 @@ export default function PromptDetailPage() {
               <span className="text-xs text-text-dimmed">
                 v{selectedVersion.version}
                 {isCurrent && <span className="ml-1 text-green-500">current</span>}
+                {selectedVersion.labels.includes("override") && (
+                  <span className="ml-1 text-amber-400">override</span>
+                )}
               </span>
             )}
-            {overrideVersion && (
-              <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
-                override active (v{overrideVersion.version})
-              </Badge>
-            )}
             {selectedVersion && !isCurrent && selectedVersion.source === "code" && (
               <Button
                 variant="tertiary/small"
@@ -529,12 +527,38 @@ export default function PromptDetailPage() {
                   Reactivate as override
                 </Button>
               )}
-            <Button variant="tertiary/small" onClick={() => setOverrideDialogOpen(true)}>
-              {overrideVersion ? "Edit Override" : "Create Override"}
-            </Button>
+            {!overrideVersion && (
+              <Button variant="tertiary/small" onClick={() => setOverrideDialogOpen(true)}>
+                Create Override
+              </Button>
+            )}
           </div>
         </PageAccessories>
       </NavBar>
+      {overrideVersion && (
+        <div className="flex items-center justify-between bg-amber-500/10 px-4 py-2">
+          <span className="text-xs text-amber-300">
+            Override v{overrideVersion.version} is active. API calls resolve this version instead of the deployed prompt.
+          </span>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="tertiary/small"
+              onClick={() => setOverrideDialogOpen(true)}
+            >
+              Edit
+            </Button>
+            <Button
+              variant="tertiary/small"
+              onClick={() =>
+                fetcher.submit({ intent: "removeOverride" }, { method: "POST" })
+              }
+              disabled={fetcher.state !== "idle"}
+            >
+              Remove
+            </Button>
+          </div>
+        </div>
+      )}
       <PageBody scrollable={false}>
         <ResizablePanelGroup
           autosaveId="prompt-detail"
@@ -553,28 +577,11 @@ export default function PromptDetailPage() {
               <ResizablePanel id="prompt-template" default="250px" min="80px">
                 <div className="flex h-full flex-col overflow-hidden p-3 pb-0">
                   {/* Sticky header */}
-                  <div className="mb-2 flex-shrink-0 space-y-2">
+                  <div className="mb-2 flex-shrink-0">
                     <div className="flex items-center justify-between">
                       <Header3>Template</Header3>
                       {content && <CopyButton value={content} variant="icon" size="extra-small" />}
                     </div>
-                    {overrideVersion && (
-                      <div className="flex items-center justify-between rounded border border-amber-500/30 bg-amber-500/5 px-3 py-2">
-                        <span className="text-xs text-amber-300">
-                          Dashboard override active (v{overrideVersion.version}). This version is
-                          served instead of the deployed version.
-                        </span>
-                        <Button
-                          variant="tertiary/small"
-                          onClick={() =>
-                            fetcher.submit({ intent: "removeOverride" }, { method: "POST" })
-                          }
-                          disabled={fetcher.state !== "idle"}
-                        >
-                          Remove override
-                        </Button>
-                      </div>
-                    )}
                   </div>
                   {/* Scrollable content */}
                   {content ? (

From 1a81db49f8aa5f82899f734e1627112152e87dc0 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sat, 21 Mar 2026 09:15:24 +0000
Subject: [PATCH 06/24] feat: add timestamp and duration to AI span inspector
 header

---
 .../route.tsx                                 | 65 +++++++++++++------
 1 file changed, 45 insertions(+), 20 deletions(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 8f19d9b337a..7806c506448 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -257,27 +257,43 @@ function SpanBody({
   const isAiGeneration = span.entity?.type === "ai-generation";
 
   return (
-    <div className="grid h-full max-h-full grid-rows-[2.5rem_1fr] overflow-hidden bg-background-bright">
-      <div className="flex items-center justify-between gap-2 overflow-x-hidden border-b border-grid-bright px-3 pr-2">
-        <div className="flex items-center gap-1 overflow-x-hidden">
-          <RunIcon
-            name={span.style?.icon}
-            spanName={span.message}
-            className="size-5 min-h-5 min-w-5"
-          />
-          <Header2 className={cn("overflow-x-hidden")}>
-            <SpanTitle {...span} size="large" hideAccessory />
-          </Header2>
+    <div className={cn(
+      "grid h-full max-h-full overflow-hidden bg-background-bright",
+      isAiGeneration ? "grid-rows-[auto_1fr]" : "grid-rows-[2.5rem_1fr]"
+    )}>
+      <div className="border-b border-grid-bright px-3 pr-2">
+        <div className="flex h-10 items-center justify-between gap-2 overflow-x-hidden">
+          <div className="flex items-center gap-1 overflow-x-hidden">
+            <RunIcon
+              name={span.style?.icon}
+              spanName={span.message}
+              className="size-5 min-h-5 min-w-5"
+            />
+            <Header2 className={cn("overflow-x-hidden")}>
+              <SpanTitle {...span} size="large" hideAccessory />
+            </Header2>
+          </div>
+          {runParam && closePanel && (
+            <Button
+              onClick={closePanel}
+              variant="minimal/small"
+              TrailingIcon={ExitIcon}
+              shortcut={{ key: "esc" }}
+              shortcutPosition="before-trailing-icon"
+              className="pl-1"
+            />
+          )}
         </div>
-        {runParam && closePanel && (
-          <Button
-            onClick={closePanel}
-            variant="minimal/small"
-            TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc" }}
-            shortcutPosition="before-trailing-icon"
-            className="pl-1"
-          />
+        {isAiGeneration && (
+          <div className="flex items-center gap-3 pb-1.5 pl-6 text-xs text-text-dimmed">
+            <DateTime date={span.startTime} includeSeconds />
+            {span.duration != null && (
+              <>
+                <span className="text-charcoal-600">/</span>
+                <span className="text-text-bright">{formatSpanDuration(span.duration)}</span>
+              </>
+            )}
+          </div>
         )}
       </div>
       {isAiGeneration ? (
@@ -291,6 +307,15 @@ function SpanBody({
   );
 }
 
+function formatSpanDuration(nanoseconds: number): string {
+  const ms = nanoseconds / 1_000_000;
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60_000);
+  const secs = ((ms % 60_000) / 1000).toFixed(0);
+  return `${mins}m ${secs}s`;
+}
+
 function applySpanOverrides(span: Span, spanOverrides?: SpanOverride): Span {
   if (!spanOverrides) {
     return span;

From 37e336718f6e29b13ddfb9656a71606a5595498c Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sat, 21 Mar 2026 10:06:47 +0000
Subject: [PATCH 07/24] feat: custom span inspectors for top-level AI SDK spans
 (generateText, streamText, generateObject, toolCall, embed)

---
 .../runs/v3/ai/AIEmbedSpanDetails.tsx         |  80 ++++++
 .../runs/v3/ai/AIToolCallSpanDetails.tsx      |  98 +++++++
 .../runs/v3/ai/extractAISummarySpanData.ts    | 262 ++++++++++++++++++
 .../webapp/app/components/runs/v3/ai/index.ts |   5 +
 .../app/presenters/v3/SpanPresenter.server.ts | 155 ++++++++---
 .../route.tsx                                 |  23 +-
 6 files changed, 582 insertions(+), 41 deletions(-)
 create mode 100644 apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
 create mode 100644 apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
 create mode 100644 apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts

diff --git a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
new file mode 100644
index 00000000000..6eb9d80b770
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
@@ -0,0 +1,80 @@
+import { Header3 } from "~/components/primitives/Headers";
+import { Paragraph } from "~/components/primitives/Paragraph";
+
+export type AIEmbedData = {
+  model: string;
+  provider: string;
+  value?: string;
+  durationMs: number;
+};
+
+export function extractAIEmbedData(
+  properties: Record<string, unknown>,
+  durationMs: number
+): AIEmbedData | undefined {
+  const ai = properties.ai;
+  if (!ai || typeof ai !== "object") return undefined;
+
+  const a = ai as Record<string, unknown>;
+  if (a.operationId !== "ai.embed") return undefined;
+
+  const aiModel = a.model;
+  if (!aiModel || typeof aiModel !== "object") return undefined;
+
+  const m = aiModel as Record<string, unknown>;
+  const model = typeof m.id === "string" ? m.id : undefined;
+  if (!model) return undefined;
+
+  return {
+    model,
+    provider: typeof m.provider === "string" ? m.provider : "unknown",
+    value: typeof a.value === "string" ? a.value : undefined,
+    durationMs,
+  };
+}
+
+export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="flex flex-col px-3">
+          {/* Model info */}
+          <div className="flex flex-col gap-1 py-2.5">
+            <div className="flex flex-col text-xs @container">
+              <MetricRow label="Model" value={data.model} />
+              <MetricRow label="Provider" value={data.provider} />
+              <MetricRow label="Duration" value={formatDuration(data.durationMs)} />
+            </div>
+          </div>
+
+          {/* Input value */}
+          {data.value && (
+            <div className="flex flex-col gap-1.5 py-2.5">
+              <Header3>Input</Header3>
+              <div className="rounded-md border border-grid-bright bg-charcoal-750/50 px-3.5 py-2">
+                <Paragraph variant="small/dimmed">{data.value}</Paragraph>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+      <span className="text-text-dimmed">{label}</span>
+      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
+    </div>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60_000);
+  const secs = ((ms % 60_000) / 1000).toFixed(0);
+  return `${mins}m ${secs}s`;
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
new file mode 100644
index 00000000000..a765f0234b1
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
@@ -0,0 +1,98 @@
+import { Header3 } from "~/components/primitives/Headers";
+import { CodeBlock } from "~/components/code/CodeBlock";
+import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+
+export type AIToolCallData = {
+  toolName: string;
+  toolCallId: string;
+  args?: string;
+  durationMs: number;
+};
+
+export function extractAIToolCallData(
+  properties: Record<string, unknown>,
+  durationMs: number
+): AIToolCallData | undefined {
+  const ai = properties.ai;
+  if (!ai || typeof ai !== "object") return undefined;
+
+  const a = ai as Record<string, unknown>;
+  if (a.operationId !== "ai.toolCall") return undefined;
+
+  const toolCall = a.toolCall;
+  if (!toolCall || typeof toolCall !== "object") return undefined;
+
+  const tc = toolCall as Record<string, unknown>;
+  const toolName = typeof tc.name === "string" ? tc.name : undefined;
+  if (!toolName) return undefined;
+
+  return {
+    toolName,
+    toolCallId: typeof tc.id === "string" ? tc.id : "",
+    args: typeof tc.args === "string" ? tc.args : undefined,
+    durationMs,
+  };
+}
+
+export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <div className="flex-1 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+        <div className="flex flex-col px-3">
+          {/* Tool info */}
+          <div className="flex flex-col gap-1 py-2.5">
+            <div className="flex flex-col text-xs @container">
+              <MetricRow label="Tool" value={data.toolName} />
+              {data.toolCallId && (
+                <MetricRow
+                  label="Call ID"
+                  value={<TruncatedCopyableValue value={data.toolCallId} />}
+                />
+              )}
+              <MetricRow label="Duration" value={formatDuration(data.durationMs)} />
+            </div>
+          </div>
+
+          {/* Input args */}
+          {data.args && (
+            <div className="flex flex-col gap-1.5 py-2.5">
+              <Header3>Input</Header3>
+              <CodeBlock
+                code={tryPrettyJson(data.args)}
+                maxLines={20}
+                showLineNumbers={false}
+                showCopyButton
+                language="json"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+      <span className="text-text-dimmed">{label}</span>
+      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
+    </div>
+  );
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60_000);
+  const secs = ((ms % 60_000) / 1000).toFixed(0);
+  return `${mins}m ${secs}s`;
+}
+
+function tryPrettyJson(value: string): string {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
new file mode 100644
index 00000000000..c08f57c222c
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
@@ -0,0 +1,262 @@
+import type { AISpanData, DisplayItem } from "./types";
+
+/**
+ * Extracts structured AI data from top-level AI SDK parent spans.
+ *
+ * These spans (ai.generateText, ai.streamText, ai.generateObject, ai.streamObject)
+ * use `ai.*` attributes instead of `gen_ai.*`. They contain the full prompt,
+ * aggregated response, and total usage across all steps.
+ */
+export function extractAISummarySpanData(
+  properties: Record<string, unknown>,
+  durationMs: number
+): AISpanData | undefined {
+  const ai = rec(properties.ai);
+  if (!ai.operationId) return undefined;
+
+  // Skip child spans that have gen_ai.* (those use extractAISpanData)
+  if (properties.gen_ai && typeof properties.gen_ai === "object") return undefined;
+
+  const aiModel = rec(ai.model);
+  const aiResponse = rec(ai.response);
+  const aiUsage = rec(ai.usage);
+  const aiSettings = rec(ai.settings);
+  const aiRequest = rec(ai.request);
+  const aiTelemetry = rec(ai.telemetry);
+  const trigger = rec(properties.trigger);
+  const triggerLlm = rec(trigger.llm);
+
+  const model = str(aiModel.id);
+  if (!model) return undefined;
+
+  const provider = str(aiModel.provider) ?? "unknown";
+  const operationName = str(ai.operationId) ?? "";
+
+  // Token usage
+  const inputTokens =
+    num(aiUsage.inputTokens) ?? num(aiUsage.promptTokens) ?? 0;
+  const outputTokens =
+    num(aiUsage.outputTokens) ?? num(aiUsage.completionTokens) ?? 0;
+  const totalTokens = num(aiUsage.totalTokens) ?? inputTokens + outputTokens;
+
+  const tokensPerSecond =
+    outputTokens > 0 && durationMs > 0
+      ? Math.round((outputTokens / (durationMs / 1000)) * 10) / 10
+      : undefined;
+
+  // Provider metadata
+  const providerMeta = parseProviderMetadata(aiResponse.providerMetadata);
+
+  // Response ID from provider metadata
+  const responseId = providerMeta?.responseId;
+
+  // Telemetry metadata (prompt info, custom metadata)
+  const telemetryMetaRaw = rec(aiTelemetry.metadata);
+  const promptMeta = rec(telemetryMetaRaw.prompt);
+  const promptSlug = str(promptMeta.slug);
+  const promptVersion = str(promptMeta.version);
+  const promptModel = str(promptMeta.model);
+  const promptLabels = str(promptMeta.labels);
+  const promptInput = str(promptMeta.input);
+  const telemetryMeta = extractTelemetryMetadata(aiTelemetry.metadata);
+
+  // Parse the prompt JSON to build display items
+  const promptJson = str(ai.prompt);
+  const items = promptJson ? parsePromptToDisplayItems(promptJson, str(aiResponse.text)) : undefined;
+
+  // Count messages from the parsed prompt
+  let messageCount: number | undefined;
+  if (promptJson) {
+    try {
+      const parsed = JSON.parse(promptJson);
+      if (parsed.messages && Array.isArray(parsed.messages)) {
+        messageCount = parsed.messages.length;
+      } else {
+        // system + prompt = 2 messages
+        messageCount = (parsed.system ? 1 : 0) + (parsed.prompt ? 1 : 0);
+      }
+    } catch {}
+  }
+
+  return {
+    model,
+    provider,
+    operationName,
+    responseId,
+    finishReason: str(aiResponse.finishReason),
+    serviceTier: providerMeta?.serviceTier,
+    resolvedProvider: providerMeta?.resolvedProvider,
+    toolChoice: undefined,
+    toolCount: undefined,
+    messageCount,
+    telemetryMetadata: telemetryMeta,
+    promptSlug: promptSlug || undefined,
+    promptVersion: promptVersion || undefined,
+    promptModel: promptModel || undefined,
+    promptLabels: promptLabels || undefined,
+    promptInput: promptInput || undefined,
+    inputTokens,
+    outputTokens,
+    totalTokens,
+    cachedTokens: num(aiUsage.cachedInputTokens),
+    cacheCreationTokens: num(aiUsage.cacheCreationInputTokens),
+    reasoningTokens: num(aiUsage.reasoningTokens),
+    tokensPerSecond,
+    msToFirstChunk: undefined, // Only on child doStream spans
+    durationMs,
+    inputCost: num(triggerLlm.input_cost),
+    outputCost: num(triggerLlm.output_cost),
+    totalCost: num(triggerLlm.total_cost),
+    responseText: str(aiResponse.text) || undefined,
+    responseObject: str(aiResponse.object) || undefined,
+    toolDefinitions: undefined,
+    items,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Primitive helpers
+// ---------------------------------------------------------------------------
+
+function rec(v: unknown): Record<string, unknown> {
+  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+}
+
+function str(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+
+function num(v: unknown): number | undefined {
+  return typeof v === "number" ? v : undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Prompt parsing
+// ---------------------------------------------------------------------------
+
+/**
+ * Parses the `ai.prompt` JSON string into display items.
+ * Parent spans store the prompt as a JSON object with either:
+ * - { system: "...", prompt: "..." }
+ * - { system: "...", messages: [...] }
+ * - { messages: [...] }
+ */
+function parsePromptToDisplayItems(
+  promptJson: string,
+  responseText?: string
+): DisplayItem[] | undefined {
+  try {
+    const parsed = JSON.parse(promptJson);
+    if (!parsed || typeof parsed !== "object") return undefined;
+
+    const items: DisplayItem[] = [];
+
+    if (typeof parsed.system === "string" && parsed.system) {
+      items.push({ type: "system", text: parsed.system });
+    }
+
+    if (typeof parsed.prompt === "string" && parsed.prompt) {
+      items.push({ type: "user", text: parsed.prompt });
+    }
+
+    if (Array.isArray(parsed.messages)) {
+      for (const msg of parsed.messages) {
+        if (!msg || typeof msg !== "object") continue;
+        const role = msg.role;
+        const content = extractMessageContent(msg.content);
+        if (!content) continue;
+
+        switch (role) {
+          case "system":
+            items.push({ type: "system", text: content });
+            break;
+          case "user":
+            items.push({ type: "user", text: content });
+            break;
+          case "assistant":
+            items.push({ type: "assistant", text: content });
+            break;
+        }
+      }
+    }
+
+    // Add response as assistant item if not already present
+    if (responseText && !items.some((i) => i.type === "assistant")) {
+      items.push({ type: "assistant", text: responseText });
+    }
+
+    return items.length > 0 ? items : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function extractMessageContent(content: unknown): string | undefined {
+  if (typeof content === "string") return content;
+  if (Array.isArray(content)) {
+    // Extract text parts from content array [{type: "text", text: "..."}]
+    return content
+      .filter((p) => p && typeof p === "object" && p.type === "text" && typeof p.text === "string")
+      .map((p) => p.text)
+      .join("\n");
+  }
+  return undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Provider metadata
+// ---------------------------------------------------------------------------
+
+function parseProviderMetadata(
+  raw: unknown
+): { serviceTier?: string; resolvedProvider?: string; responseId?: string } | undefined {
+  const jsonStr = str(raw);
+  if (!jsonStr) return undefined;
+
+  try {
+    const parsed = JSON.parse(jsonStr);
+    if (!parsed || typeof parsed !== "object") return undefined;
+
+    let serviceTier: string | undefined;
+    let resolvedProvider: string | undefined;
+    let responseId: string | undefined;
+
+    // OpenAI
+    if (parsed.openai) {
+      serviceTier = parsed.openai.serviceTier;
+      responseId = parsed.openai.responseId;
+    }
+
+    // Anthropic
+    if (parsed.anthropic?.usage?.service_tier) {
+      serviceTier = parsed.anthropic.usage.service_tier;
+    }
+
+    return serviceTier || resolvedProvider || responseId
+      ? { serviceTier, resolvedProvider, responseId }
+      : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Telemetry metadata
+// ---------------------------------------------------------------------------
+
+function extractTelemetryMetadata(
+  metadata: unknown
+): Record<string, string> | undefined {
+  if (!metadata || typeof metadata !== "object") return undefined;
+
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(metadata as Record<string, unknown>)) {
+    // Skip prompt metadata (handled separately) and non-string values
+    if (key === "prompt") continue;
+    if (typeof value === "string") {
+      result[key] = value;
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/index.ts b/apps/webapp/app/components/runs/v3/ai/index.ts
index 7e33a46fb2c..5acb9ff17a2 100644
--- a/apps/webapp/app/components/runs/v3/ai/index.ts
+++ b/apps/webapp/app/components/runs/v3/ai/index.ts
@@ -1,3 +1,8 @@
 export { AISpanDetails } from "./AISpanDetails";
 export { extractAISpanData } from "./extractAISpanData";
+export { extractAISummarySpanData } from "./extractAISummarySpanData";
+export { AIToolCallSpanDetails, extractAIToolCallData } from "./AIToolCallSpanDetails";
+export type { AIToolCallData } from "./AIToolCallSpanDetails";
+export { AIEmbedSpanDetails, extractAIEmbedData } from "./AIEmbedSpanDetails";
+export type { AIEmbedData } from "./AIEmbedSpanDetails";
 export type { AISpanData, DisplayItem, ToolUse } from "./types";
diff --git a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
index 19271d85a7f..0ea9b37ab7f 100644
--- a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
@@ -24,7 +24,12 @@ import { engine } from "~/v3/runEngine.server";
 import { resolveEventRepositoryForStore } from "~/v3/eventRepository/index.server";
 import { IEventRepository, SpanDetail } from "~/v3/eventRepository/eventRepository.types";
 import { safeJsonParse } from "~/utils/json";
-import { extractAISpanData } from "~/components/runs/v3/ai";
+import {
+  extractAISpanData,
+  extractAISummarySpanData,
+  extractAIToolCallData,
+  extractAIEmbedData,
+} from "~/components/runs/v3/ai";
 
 export type PromptSpanData = {
   slug: string;
@@ -725,42 +730,79 @@ export class SpanPresenter extends BasePresenter {
 
         return { ...data, entity: null };
       }
-      default:
-        if (data.aiData) {
-          // Look up prompt version data if this generation has a linked prompt
-          let promptVersionData: PromptSpanData | undefined;
-          if (data.aiData.promptSlug && data.aiData.promptVersion) {
-            const prompt = await this._replica.prompt.findUnique({
-              where: {
-                projectId_runtimeEnvironmentId_slug: {
-                  projectId,
-                  runtimeEnvironmentId: environmentId,
-                  slug: data.aiData.promptSlug,
-                },
+      default: {
+        // Check for top-level AI SDK parent spans by message name
+        const AI_SUMMARY_MESSAGES = [
+          "ai.generateText",
+          "ai.streamText",
+          "ai.generateObject",
+          "ai.streamObject",
+        ];
+
+        if (
+          typeof span.message === "string" &&
+          AI_SUMMARY_MESSAGES.includes(span.message)
+        ) {
+          const aiSummaryData = extractAISummarySpanData(
+            span.properties as Record<string, unknown>,
+            span.duration / 1_000_000
+          );
+          if (aiSummaryData) {
+            const promptVersionData = await this.#lookupPromptVersion(
+              aiSummaryData.promptSlug,
+              aiSummaryData.promptVersion,
+              aiSummaryData.promptLabels,
+              aiSummaryData.promptInput,
+              projectId,
+              environmentId
+            );
+            return {
+              ...data,
+              entity: {
+                type: "ai-summary" as const,
+                object: aiSummaryData,
+                promptVersionData,
               },
-            });
-            if (prompt) {
-              const version = await this._replica.promptVersion.findUnique({
-                where: {
-                  promptId_version: {
-                    promptId: prompt.id,
-                    version: Number(data.aiData.promptVersion),
-                  },
-                },
-              });
-              if (version) {
-                promptVersionData = {
-                  slug: data.aiData.promptSlug,
-                  version: version.version,
-                  labels: data.aiData.promptLabels ?? "",
-                  model: version.model ?? undefined,
-                  template: version.textContent ?? undefined,
-                  text: undefined, // Resolved text is per-invocation, not stored on the version
-                  input: data.aiData.promptInput,
-                };
-              }
-            }
+            };
+          }
+        }
+
+        if (span.message === "ai.toolCall") {
+          const toolCallData = extractAIToolCallData(
+            span.properties as Record<string, unknown>,
+            span.duration / 1_000_000
+          );
+          if (toolCallData) {
+            return {
+              ...data,
+              entity: { type: "ai-tool-call" as const, object: toolCallData },
+            };
+          }
+        }
+
+        if (span.message === "ai.embed") {
+          const embedData = extractAIEmbedData(
+            span.properties as Record<string, unknown>,
+            span.duration / 1_000_000
+          );
+          if (embedData) {
+            return {
+              ...data,
+              entity: { type: "ai-embed" as const, object: embedData },
+            };
           }
+        }
+
+        // Child generation spans (doGenerate/doStream) with gen_ai.* attributes
+        if (data.aiData) {
+          const promptVersionData = await this.#lookupPromptVersion(
+            data.aiData.promptSlug,
+            data.aiData.promptVersion,
+            data.aiData.promptLabels,
+            data.aiData.promptInput,
+            projectId,
+            environmentId
+          );
           return {
             ...data,
             entity: {
@@ -771,9 +813,52 @@ export class SpanPresenter extends BasePresenter {
           };
         }
         return { ...data, entity: null };
+      }
     }
   }
 
+  async #lookupPromptVersion(
+    promptSlug: string | undefined,
+    promptVersion: string | undefined,
+    promptLabels: string | undefined,
+    promptInput: string | undefined,
+    projectId: string,
+    environmentId: string
+  ): Promise<PromptSpanData | undefined> {
+    if (!promptSlug || !promptVersion) return undefined;
+
+    const prompt = await this._replica.prompt.findUnique({
+      where: {
+        projectId_runtimeEnvironmentId_slug: {
+          projectId,
+          runtimeEnvironmentId: environmentId,
+          slug: promptSlug,
+        },
+      },
+    });
+    if (!prompt) return undefined;
+
+    const version = await this._replica.promptVersion.findUnique({
+      where: {
+        promptId_version: {
+          promptId: prompt.id,
+          version: Number(promptVersion),
+        },
+      },
+    });
+    if (!version) return undefined;
+
+    return {
+      slug: promptSlug,
+      version: version.version,
+      labels: promptLabels ?? "",
+      model: version.model ?? undefined,
+      template: version.textContent ?? undefined,
+      text: undefined,
+      input: promptInput,
+    };
+  }
+
   async #getTaskRunContext({ run, machine }: { run: FindRunResult; machine?: MachinePreset }) {
     if (run.engine === "V1") {
       return this.#getV3TaskRunContext({ run, machine });
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index 7806c506448..fdd9f0d3513 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -60,7 +60,7 @@ import { RunIcon } from "~/components/runs/v3/RunIcon";
 import { RunTag } from "~/components/runs/v3/RunTag";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
 import { SpanEvents } from "~/components/runs/v3/SpanEvents";
-import { AISpanDetails } from "~/components/runs/v3/ai";
+import { AISpanDetails, AIToolCallSpanDetails, AIEmbedSpanDetails } from "~/components/runs/v3/ai";
 import { PromptSpanDetails } from "~/components/runs/v3/PromptSpanDetails";
 import { SpanTitle } from "~/components/runs/v3/SpanTitle";
 import { TaskRunAttemptStatusCombo } from "~/components/runs/v3/TaskRunAttemptStatus";
@@ -254,12 +254,16 @@ function SpanBody({
 
   span = applySpanOverrides(span, spanOverrides);
 
-  const isAiGeneration = span.entity?.type === "ai-generation";
+  const isAiInspector =
+    span.entity?.type === "ai-generation" ||
+    span.entity?.type === "ai-summary" ||
+    span.entity?.type === "ai-tool-call" ||
+    span.entity?.type === "ai-embed";
 
   return (
     <div className={cn(
       "grid h-full max-h-full overflow-hidden bg-background-bright",
-      isAiGeneration ? "grid-rows-[auto_1fr]" : "grid-rows-[2.5rem_1fr]"
+      isAiInspector ? "grid-rows-[auto_1fr]" : "grid-rows-[2.5rem_1fr]"
     )}>
       <div className="border-b border-grid-bright px-3 pr-2">
         <div className="flex h-10 items-center justify-between gap-2 overflow-x-hidden">
@@ -284,7 +288,7 @@ function SpanBody({
             />
           )}
         </div>
-        {isAiGeneration && (
+        {isAiInspector && (
           <div className="flex items-center gap-3 pb-1.5 pl-6 text-xs text-text-dimmed">
             <DateTime date={span.startTime} includeSeconds />
             {span.duration != null && (
@@ -296,7 +300,7 @@ function SpanBody({
           </div>
         )}
       </div>
-      {isAiGeneration ? (
+      {isAiInspector ? (
         <SpanEntity span={span} />
       ) : (
         <div className="scrollbar-gutter-stable overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
@@ -1414,7 +1418,8 @@ function SpanEntity({ span }: { span: Span }) {
         />
       );
     }
-    case "ai-generation": {
+    case "ai-generation":
+    case "ai-summary": {
       return (
         <AISpanDetails
           aiData={span.entity.object}
@@ -1423,6 +1428,12 @@ function SpanEntity({ span }: { span: Span }) {
         />
       );
     }
+    case "ai-tool-call": {
+      return <AIToolCallSpanDetails data={span.entity.object} />;
+    }
+    case "ai-embed": {
+      return <AIEmbedSpanDetails data={span.entity.object} />;
+    }
     case "prompt": {
       return <PromptSpanDetails promptData={span.entity.object} />;
     }

From 3935f7e9a051bf52230ae1c975f8087c09e6003b Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sat, 21 Mar 2026 13:29:03 +0000
Subject: [PATCH 08/24] fix: a11y label on expand button, try-catch
 request.json, add missing type field

---
 .../app/components/runs/v3/ai/AIChatMessages.tsx |  2 ++
 .../route.tsx                                    |  1 +
 .../app/routes/api.v1.prompts.$slug.override.ts  | 16 +++++++++++++---
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index b45b0832967..061090f291a 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -114,6 +114,8 @@ function SystemSection({
             variant="minimal/small"
             onClick={() => setExpanded(!expanded)}
             LeadingIcon={expanded ? ChevronUpIcon : ChevronDownIcon}
+            aria-label={expanded ? "Collapse" : "Expand"}
+            aria-expanded={expanded}
           />
         )}
       </div>
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index e4eccd92c5b..81e788e60d9 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -1148,6 +1148,7 @@ type GenerationRow = {
   operation_id: string;
   task_identifier: string;
   response_model: string;
+  prompt_version: number;
   input_tokens: number;
   output_tokens: number;
   total_cost: number;
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
index 9964d5f9e1a..5184eca8aa1 100644
--- a/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
@@ -61,7 +61,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
   const service = new PromptService();
 
   if (method === "POST") {
-    const rawBody = await request.json();
+    let rawBody: unknown;
+    try {
+      rawBody = await request.json();
+    } catch {
+      return apiCors(request, json({ error: "Invalid JSON" }, { status: 400 }));
+    }
     const parsed = CreateBody.safeParse(rawBody);
     if (!parsed.success) {
       return apiCors(
@@ -81,7 +86,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
   }
 
   if (method === "PUT" || method === "PATCH") {
-    const rawBody = await request.json();
+    let rawBody: unknown;
+    try {
+      rawBody = await request.json();
+    } catch {
+      return apiCors(request, json({ error: "Invalid JSON" }, { status: 400 }));
+    }
     const parsed = UpdateBody.safeParse(rawBody);
     if (!parsed.success) {
       return apiCors(
@@ -112,6 +122,6 @@ export async function action({ request, params }: ActionFunctionArgs) {
 
   return apiCors(
     request,
-    json({ error: "Method not allowed" }, { status: 405, headers: { Allow: "POST, PUT, DELETE" } })
+    json({ error: "Method not allowed" }, { status: 405, headers: { Allow: "POST, PUT, PATCH, DELETE" } })
   );
 }

From 7a681c2b4a96c29998be25edfdf0ccabc8bfa8a0 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sat, 21 Mar 2026 14:17:59 +0000
Subject: [PATCH 09/24] fix: TypeScript strict mode errors across AI prompts
 feature

---
 .../app/components/navigation/sideMenuTypes.ts  |  2 +-
 .../runs/v3/ai/extractAISummarySpanData.ts      | 17 +++++++++++------
 .../app/presenters/v3/PromptPresenter.server.ts |  2 +-
 .../route.tsx                                   |  6 +++---
 .../app/v3/services/promptService.server.ts     |  3 ++-
 .../v3/utils/enrichCreatableEvents.server.ts    |  9 +++++----
 6 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/webapp/app/components/navigation/sideMenuTypes.ts b/apps/webapp/app/components/navigation/sideMenuTypes.ts
index 8dc722a37d1..d9b0fba5af2 100644
--- a/apps/webapp/app/components/navigation/sideMenuTypes.ts
+++ b/apps/webapp/app/components/navigation/sideMenuTypes.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 // Valid section IDs that can have their collapsed state toggled
-export const SideMenuSectionIdSchema = z.enum(["manage", "metrics", "project-settings"]);
+export const SideMenuSectionIdSchema = z.enum(["ai", "manage", "metrics", "project-settings"]);
 
 // Inferred type from the schema
 export type SideMenuSectionId = z.infer<typeof SideMenuSectionIdSchema>;
diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
index c08f57c222c..e71f77fd3c1 100644
--- a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
@@ -68,7 +68,7 @@ export function extractAISummarySpanData(
   let messageCount: number | undefined;
   if (promptJson) {
     try {
-      const parsed = JSON.parse(promptJson);
+      const parsed = JSON.parse(promptJson) as Record<string, unknown>;
       if (parsed.messages && Array.isArray(parsed.messages)) {
         messageCount = parsed.messages.length;
       } else {
@@ -146,7 +146,7 @@ function parsePromptToDisplayItems(
   responseText?: string
 ): DisplayItem[] | undefined {
   try {
-    const parsed = JSON.parse(promptJson);
+    const parsed = JSON.parse(promptJson) as Record<string, unknown>;
     if (!parsed || typeof parsed !== "object") return undefined;
 
     const items: DisplayItem[] = [];
@@ -162,8 +162,9 @@ function parsePromptToDisplayItems(
     if (Array.isArray(parsed.messages)) {
       for (const msg of parsed.messages) {
         if (!msg || typeof msg !== "object") continue;
-        const role = msg.role;
-        const content = extractMessageContent(msg.content);
+        const m = msg as Record<string, unknown>;
+        const role = m.role;
+        const content = extractMessageContent(m.content);
         if (!content) continue;
 
         switch (role) {
@@ -196,7 +197,11 @@ function extractMessageContent(content: unknown): string | undefined {
   if (Array.isArray(content)) {
     // Extract text parts from content array [{type: "text", text: "..."}]
     return content
-      .filter((p) => p && typeof p === "object" && p.type === "text" && typeof p.text === "string")
+      .filter((p): p is { type: string; text: string } => {
+        if (!p || typeof p !== "object") return false;
+        const o = p as Record<string, unknown>;
+        return o.type === "text" && typeof o.text === "string";
+      })
       .map((p) => p.text)
       .join("\n");
   }
@@ -214,7 +219,7 @@ function parseProviderMetadata(
   if (!jsonStr) return undefined;
 
   try {
-    const parsed = JSON.parse(jsonStr);
+    const parsed = JSON.parse(jsonStr) as Record<string, any>;
     if (!parsed || typeof parsed !== "object") return undefined;
 
     let serviceTier: string | undefined;
diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
index 1f84d002afd..77c94bd42ad 100644
--- a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -373,7 +373,7 @@ function encodeCursor(startTime: string, spanId: string): string {
 
 function decodeCursor(cursor: string): { startTime: string; spanId: string } | null {
   try {
-    const parsed = JSON.parse(Buffer.from(cursor, "base64").toString("utf-8"));
+    const parsed = JSON.parse(Buffer.from(cursor, "base64").toString("utf-8")) as Record<string, unknown>;
     if (typeof parsed.s === "string" && typeof parsed.i === "string") {
       return { startTime: parsed.s, spanId: parsed.i };
     }
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
index 9e3b6f949dc..dc1f3fa2703 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
@@ -509,7 +509,7 @@ function TraceView({
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
       <ResizablePanelGroup
         autosaveId={resizableSettings.parent.autosaveId}
-        snapshot={resizable.parent}
+        snapshot={resizable.parent as ResizableSnapshot}
         className="h-full max-h-full"
       >
         <ResizablePanel
@@ -539,7 +539,7 @@ function TraceView({
             rootRun={run.rootTaskRun}
             parentRun={run.parentTaskRun}
             isCompleted={run.completedAt !== null}
-            treeSnapshot={resizable.tree}
+            treeSnapshot={resizable.tree as ResizableSnapshot}
           />
         </ResizablePanel>
         <ResizableHandle id={resizableSettings.parent.handleId} />
@@ -585,7 +585,7 @@ function NoLogsView({ run, resizable }: Pick<LoaderData, "run" | "resizable">) {
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
       <ResizablePanelGroup
         autosaveId={resizableSettings.parent.autosaveId}
-        snapshot={resizable.parent}
+        snapshot={resizable.parent as ResizableSnapshot}
         className="h-full max-h-full"
       >
         <ResizablePanel
diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
index 15a21d33b17..2deb1094ca1 100644
--- a/apps/webapp/app/v3/services/promptService.server.ts
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -1,4 +1,5 @@
 import { createHash } from "crypto";
+import { prisma } from "~/db.server";
 import { BaseService, ServiceValidationError } from "./baseService.server";
 
 export class PromptService extends BaseService {
@@ -36,7 +37,7 @@ export class PromptService extends BaseService {
     const nextVersion = await this.#getNextVersionNumber(promptId);
 
     // Remove any existing override, then create new — wraps in transaction
-    await this._prisma.$transaction(async (tx) => {
+    await prisma.$transaction(async (tx) => {
       await tx.$executeRaw`
         UPDATE "prompt_versions"
         SET "labels" = array_remove("labels", 'override')
diff --git a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
index bce2aeddecf..6b52e93469f 100644
--- a/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
+++ b/apps/webapp/app/v3/utils/enrichCreatableEvents.server.ts
@@ -434,10 +434,11 @@ function enrichPromptResolve(event: CreateEventInput): void {
 
   if (typeof slug !== "string") return;
 
-  const style = event.style ?? {};
+  const style = (event.style ?? {}) as Record<string, unknown>;
+  const accessory = style.accessory as Record<string, unknown> | undefined;
   const existingItems =
-    style.accessory && "items" in style.accessory
-      ? (style.accessory.items as Array<{ text: string; icon?: string; variant?: string }>)
+    accessory && "items" in accessory
+      ? (accessory.items as Array<{ text: string; icon?: string; variant?: string }>)
       : [];
 
   const items = [
@@ -452,5 +453,5 @@ function enrichPromptResolve(event: CreateEventInput): void {
     ...style,
     icon: style.icon ?? "tabler-file-text-ai",
     accessory: { style: "pills" as const, items },
-  };
+  } as unknown as typeof event.style;
 }

From 2228c9ed6186cfbb1d3d8c4f74ddd0605b3d08fa Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 07:28:21 +0000
Subject: [PATCH 10/24] coderabbit fixes

---
 .../runs/v3/ai/extractAISummarySpanData.ts    |  5 +--
 .../routes/api.v1.prompts.$slug.override.ts   |  2 +-
 ...nvParam.prompts.$promptSlug.generations.ts | 15 ++++++-
 .../app/v3/services/promptService.server.ts   | 44 ++++++++++++-------
 4 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
index e71f77fd3c1..2eda2c71635 100644
--- a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
@@ -223,7 +223,6 @@ function parseProviderMetadata(
     if (!parsed || typeof parsed !== "object") return undefined;
 
     let serviceTier: string | undefined;
-    let resolvedProvider: string | undefined;
     let responseId: string | undefined;
 
     // OpenAI
@@ -237,8 +236,8 @@ function parseProviderMetadata(
       serviceTier = parsed.anthropic.usage.service_tier;
     }
 
-    return serviceTier || resolvedProvider || responseId
-      ? { serviceTier, resolvedProvider, responseId }
+    return serviceTier || responseId
+      ? { serviceTier, responseId }
       : undefined;
   } catch {
     return undefined;
diff --git a/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
index 5184eca8aa1..aa5ad528e5f 100644
--- a/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
+++ b/apps/webapp/app/routes/api.v1.prompts.$slug.override.ts
@@ -28,7 +28,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
   if (request.method.toUpperCase() === "OPTIONS") {
     return apiCors(request, json({}));
   }
-  return new Response(null, { status: 405 });
+  return apiCors(request, json({ error: "Method not allowed" }, { status: 405 }));
 }
 
 export async function action({ request, params }: ActionFunctionArgs) {
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
index e9786f3b852..8ca8fdb35a8 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
@@ -50,8 +50,17 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   if (!environment) throw new Response("Environment not found", { status: 404 });
 
   const url = new URL(request.url);
-  const versions = url.searchParams.getAll("versions").filter(Boolean).map(Number).filter((n) => !isNaN(n));
+
+  const versions = url.searchParams
+    .getAll("versions")
+    .map(Number)
+    .filter((n) => Number.isInteger(n) && n > 0);
+
   const period = url.searchParams.get("period") ?? "7d";
+  if (!/^\d+[mhdw]$/.test(period)) {
+    return json({ generations: [], pagination: {} } satisfies GenerationsResponse);
+  }
+
   const fromTime = url.searchParams.get("from");
   const toTime = url.searchParams.get("to");
   const cursorParam = url.searchParams.get("cursor") ?? undefined;
@@ -60,6 +69,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
   const endTime = toTime ? new Date(toTime) : new Date();
 
+  if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
+    return json({ generations: [], pagination: {} } satisfies GenerationsResponse);
+  }
+
   const models = url.searchParams.getAll("models").filter(Boolean);
   const operations = url.searchParams.getAll("operations").filter(Boolean);
   const providers = url.searchParams.getAll("providers").filter(Boolean);
diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
index 2deb1094ca1..107b0dcc670 100644
--- a/apps/webapp/app/v3/services/promptService.server.ts
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -4,23 +4,37 @@ import { BaseService, ServiceValidationError } from "./baseService.server";
 
 export class PromptService extends BaseService {
   async promoteVersion(promptId: string, versionId: string, options?: { sourceGuard?: boolean }) {
-    if (options?.sourceGuard) {
-      const target = await this._prisma.promptVersion.findUnique({
-        where: { id: versionId },
-      });
-      if (!target) {
-        throw new ServiceValidationError("Version not found", 404);
-      }
-      if (target.source !== "code") {
-        throw new ServiceValidationError(
-          "Only code-sourced versions can be promoted. Use the override API instead.",
-          400
-        );
-      }
+    const target = await this._prisma.promptVersion.findUnique({
+      where: { id: versionId },
+    });
+
+    if (!target) {
+      throw new ServiceValidationError("Version not found", 404);
+    }
+
+    if (target.promptId !== promptId) {
+      throw new ServiceValidationError("Version does not belong to this prompt", 400);
+    }
+
+    if (options?.sourceGuard && target.source !== "code") {
+      throw new ServiceValidationError(
+        "Only code-sourced versions can be promoted. Use the override API instead.",
+        400
+      );
     }
 
-    await this.#removeLabel(promptId, "current");
-    await this.#addLabel(versionId, "current");
+    await prisma.$transaction(async (tx) => {
+      await tx.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_remove("labels", 'current')
+        WHERE "promptId" = ${promptId} AND 'current' = ANY("labels")
+      `;
+      await tx.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_append("labels", 'current')
+        WHERE "id" = ${versionId} AND NOT ('current' = ANY("labels"))
+      `;
+    });
   }
 
   async createOverride(

From 96e1426e18040aaceddf7311e33b9ee5533fb6a0 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 08:47:17 +0000
Subject: [PATCH 11/24] fix: transaction safety, parsePeriodToMs consistency,
 SQL injection prevention

---
 .../route.tsx                                 | 14 ++++++----
 .../app/v3/services/promptService.server.ts   | 28 +++++++++++++++----
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 81e788e60d9..7309addc7a4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -336,19 +336,19 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 // ─── Helpers ─────────────────────────────────────────────
 
 function parsePeriodToMs(period: string): number {
-  const match = period.match(/^(\d+)([hdwm])$/);
+  const match = period.match(/^(\d+)([mhdw])$/);
   if (!match) return 7 * 24 * 60 * 60 * 1000; // default 7d
   const [, numStr, unit] = match;
   const num = parseInt(numStr, 10);
   switch (unit) {
+    case "m":
+      return num * 60 * 1000;
     case "h":
       return num * 60 * 60 * 1000;
     case "d":
       return num * 24 * 60 * 60 * 1000;
     case "w":
       return num * 7 * 24 * 60 * 60 * 1000;
-    case "m":
-      return num * 30 * 24 * 60 * 60 * 1000;
     default:
       return 7 * 24 * 60 * 60 * 1000;
   }
@@ -1523,7 +1523,9 @@ function MetricsTab({
   to: string | null;
 }) {
   const { values: filterValues } = useSearchParams();
-  const versionFilters = filterValues("versions").filter((v) => v !== "");
+  const versionFilters = filterValues("versions")
+    .map(Number)
+    .filter((n) => Number.isInteger(n) && n > 0);
   const models = filterValues("models").filter((v) => v !== "");
   const operations = filterValues("operations").filter((v) => v !== "");
   const providers = filterValues("providers").filter((v) => v !== "");
@@ -1641,7 +1643,9 @@ function VersionPerformanceSection({
   to: string | null;
 }) {
   const { values: filterValues } = useSearchParams();
-  const versionFilters = filterValues("versions").filter((v) => v !== "");
+  const versionFilters = filterValues("versions")
+    .map(Number)
+    .filter((n) => Number.isInteger(n) && n > 0);
   const models = filterValues("models").filter((v) => v !== "");
   const operations = filterValues("operations").filter((v) => v !== "");
   const providers = filterValues("providers").filter((v) => v !== "");
diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
index 107b0dcc670..d8aa2b34c7f 100644
--- a/apps/webapp/app/v3/services/promptService.server.ts
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -48,10 +48,14 @@ export class PromptService extends BaseService {
     }
   ) {
     const contentHash = createHash("sha256").update(data.textContent).digest("hex").slice(0, 16);
-    const nextVersion = await this.#getNextVersionNumber(promptId);
 
-    // Remove any existing override, then create new — wraps in transaction
-    await prisma.$transaction(async (tx) => {
+    const result = await prisma.$transaction(async (tx) => {
+      const latest = await tx.promptVersion.findFirst({
+        where: { promptId },
+        orderBy: { version: "desc" },
+      });
+      const nextVersion = (latest?.version ?? 0) + 1;
+
       await tx.$executeRaw`
         UPDATE "prompt_versions"
         SET "labels" = array_remove("labels", 'override')
@@ -71,9 +75,11 @@ export class PromptService extends BaseService {
           createdBy: data.createdBy,
         },
       });
+
+      return { version: nextVersion };
     });
 
-    return { version: nextVersion };
+    return result;
   }
 
   async updateOverride(
@@ -127,8 +133,18 @@ export class PromptService extends BaseService {
       );
     }
 
-    await this.#removeLabel(promptId, "override");
-    await this.#addLabel(versionId, "override");
+    await prisma.$transaction(async (tx) => {
+      await tx.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_remove("labels", 'override')
+        WHERE "promptId" = ${promptId} AND 'override' = ANY("labels")
+      `;
+      await tx.$executeRaw`
+        UPDATE "prompt_versions"
+        SET "labels" = array_append("labels", 'override')
+        WHERE "id" = ${versionId} AND NOT ('override' = ANY("labels"))
+      `;
+    });
   }
 
   async #removeLabel(promptId: string, label: string) {

From a2adc21ad6e99ed9b7cec6712b98801505ace432 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 14:06:47 +0000
Subject: [PATCH 12/24] fix: parameterize prompt slug in SQL queries, add
 ownership check to reactivateOverride, use nullish coalescing in
 updateOverride

---
 .../route.tsx                                 | 24 ++++++++++---------
 .../app/v3/services/promptService.server.ts   |  8 +++++--
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 7309addc7a4..079ff106d64 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -1541,6 +1541,7 @@ function MetricsTab({
     period,
     from,
     to,
+    promptSlugs: [prompt.slug],
     responseModels: models.length > 0 ? models : undefined,
     operations: operations.length > 0 ? operations : undefined,
     providers: providers.length > 0 ? providers : undefined,
@@ -1554,7 +1555,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-generations`}
             title="Total"
-            query={`SELECT count() AS generations FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
+            query={`SELECT count() AS generations FROM llm_metrics WHERE 1=1${versionFilter}`}
             config={{
               type: "bignumber",
               column: "generations",
@@ -1568,7 +1569,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-tokens`}
             title="Avg input tokens"
-            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
+            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE 1=1${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_input",
@@ -1582,7 +1583,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-cost`}
             title="Avg input cost"
-            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
+            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE 1=1${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_cost",
@@ -1596,7 +1597,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-latency`}
             title="Avg latency"
-            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE prompt_slug = '${prompt.slug}'${versionFilter}`}
+            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE 1=1${versionFilter}`}
             config={{
               type: "bignumber",
               column: "avg_ms",
@@ -1661,6 +1662,7 @@ function VersionPerformanceSection({
     period,
     from,
     to,
+    promptSlugs: [promptSlug],
     responseModels: models.length > 0 ? models : undefined,
     operations: operations.length > 0 ? operations : undefined,
     providers: providers.length > 0 ? providers : undefined,
@@ -1677,7 +1679,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-latency-${versionFilters.join(",")}`}
             title="Latency p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1696,7 +1698,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-ttfc-${versionFilters.join(",")}`}
             title="TTFC p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND ms_to_first_chunk > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE ms_to_first_chunk > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1716,7 +1718,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-input-tokens-${versionFilters.join(",")}`}
             title="Input tokens p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1735,7 +1737,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-input-cost-${versionFilters.join(",")}`}
             title="Input cost per 1k tokens (p50 / p95)"
-            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND input_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE input_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1755,7 +1757,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-output-tokens-${versionFilters.join(",")}`}
             title="Output tokens p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1774,7 +1776,7 @@ function VersionPerformanceSection({
           <MetricWidget
             widgetKey={`prompt-${promptSlug}-perf-output-cost-${versionFilters.join(",")}`}
             title="Output cost per 1k tokens (p50 / p95)"
-            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE prompt_slug = '${promptSlug}' AND output_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE output_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1795,7 +1797,7 @@ function VersionPerformanceSection({
         <MetricWidget
           widgetKey={`prompt-${promptSlug}-perf-versions-table-${versionFilters.join(",")}`}
           title="Version summary"
-          query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE prompt_slug = '${promptSlug}'${versionFilter} GROUP BY prompt_version ORDER BY prompt_version DESC`}
+          query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY prompt_version ORDER BY prompt_version DESC`}
           config={{ type: "table", prettyFormatting: true, sorting: [] }}
           {...widgetProps}
         />
diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
index d8aa2b34c7f..cae9c3c015c 100644
--- a/apps/webapp/app/v3/services/promptService.server.ts
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -106,8 +106,8 @@ export class PromptService extends BaseService {
       where: { id: overrideVer.id },
       data: {
         textContent: contentString,
-        model: data.model || overrideVer.model,
-        commitMessage: data.commitMessage || overrideVer.commitMessage,
+        model: data.model ?? overrideVer.model,
+        commitMessage: data.commitMessage ?? overrideVer.commitMessage,
         contentHash,
       },
     });
@@ -126,6 +126,10 @@ export class PromptService extends BaseService {
       throw new ServiceValidationError("Version not found", 404);
     }
 
+    if (target.promptId !== promptId) {
+      throw new ServiceValidationError("Version does not belong to this prompt", 400);
+    }
+
     if (target.source === "code") {
       throw new ServiceValidationError(
         "Code-sourced versions cannot be reactivated as overrides",

From f78675fd0b7d53d4fc7f05fe89566111766612c4 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:06:31 +0000
Subject: [PATCH 13/24] fix: replace SQL string interpolation with
 parameterized promptVersions filter

---
 .../route.tsx                                 | 47 ++++++++-----------
 apps/webapp/app/routes/resources.metric.tsx   |  4 ++
 .../app/services/queryService.server.ts       |  7 +++
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 079ff106d64..437ec1def25 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -1530,9 +1530,6 @@ function MetricsTab({
   const operations = filterValues("operations").filter((v) => v !== "");
   const providers = filterValues("providers").filter((v) => v !== "");
 
-  const versionFilter =
-    versionFilters.length > 0 ? ` AND prompt_version IN (${versionFilters.join(",")})` : "";
-
   const widgetProps = {
     organizationId,
     projectId,
@@ -1542,6 +1539,7 @@ function MetricsTab({
     from,
     to,
     promptSlugs: [prompt.slug],
+    promptVersions: versionFilters.length > 0 ? versionFilters : undefined,
     responseModels: models.length > 0 ? models : undefined,
     operations: operations.length > 0 ? operations : undefined,
     providers: providers.length > 0 ? providers : undefined,
@@ -1555,7 +1553,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-generations`}
             title="Total"
-            query={`SELECT count() AS generations FROM llm_metrics WHERE 1=1${versionFilter}`}
+            query={`SELECT count() AS generations FROM llm_metrics WHERE 1=1`}
             config={{
               type: "bignumber",
               column: "generations",
@@ -1569,7 +1567,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-tokens`}
             title="Avg input tokens"
-            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE 1=1${versionFilter}`}
+            query={`SELECT round(avg(input_tokens)) AS avg_input FROM llm_metrics WHERE 1=1`}
             config={{
               type: "bignumber",
               column: "avg_input",
@@ -1583,7 +1581,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-cost`}
             title="Avg input cost"
-            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE 1=1${versionFilter}`}
+            query={`SELECT avg(input_cost) AS avg_cost FROM llm_metrics WHERE 1=1`}
             config={{
               type: "bignumber",
               column: "avg_cost",
@@ -1597,7 +1595,7 @@ function MetricsTab({
           <MetricWidget
             widgetKey={`prompt-${prompt.slug}-latency`}
             title="Avg latency"
-            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE 1=1${versionFilter}`}
+            query={`SELECT round(avg(duration) / 1000000, 1) AS avg_ms FROM llm_metrics WHERE 1=1`}
             config={{
               type: "bignumber",
               column: "avg_ms",
@@ -1651,9 +1649,6 @@ function VersionPerformanceSection({
   const operations = filterValues("operations").filter((v) => v !== "");
   const providers = filterValues("providers").filter((v) => v !== "");
 
-  const versionFilter =
-    versionFilters.length > 0 ? ` AND prompt_version IN (${versionFilters.join(",")})` : "";
-
   const widgetProps = {
     organizationId,
     projectId,
@@ -1663,6 +1658,7 @@ function VersionPerformanceSection({
     from,
     to,
     promptSlugs: [promptSlug],
+    promptVersions: versionFilters.length > 0 ? versionFilters : undefined,
     responseModels: models.length > 0 ? models : undefined,
     operations: operations.length > 0 ? operations : undefined,
     providers: providers.length > 0 ? providers : undefined,
@@ -1670,16 +1666,13 @@ function VersionPerformanceSection({
 
   return (
     <div className="space-y-3">
-      <div className="flex items-center gap-2">
-      </div>
-
       <div className="grid grid-cols-2 gap-3">
         {/* Row 1: Latency + TTFC */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-latency-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-latency`}
             title="Latency p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(duration) / 1000000, 1) AS p50, round(quantile(0.95)(duration) / 1000000, 1) AS p95 FROM llm_metrics WHERE 1=1 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1696,9 +1689,9 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-ttfc-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-ttfc`}
             title="TTFC p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE ms_to_first_chunk > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(ms_to_first_chunk), 1) AS p50, round(quantile(0.95)(ms_to_first_chunk), 1) AS p95 FROM llm_metrics WHERE ms_to_first_chunk > 0 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1716,9 +1709,9 @@ function VersionPerformanceSection({
         {/* Row 2: Input tokens + Input cost */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-input-tokens-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-input-tokens`}
             title="Input tokens p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(input_tokens)) AS p50, round(quantile(0.95)(input_tokens)) AS p95 FROM llm_metrics WHERE 1=1 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1735,9 +1728,9 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-input-cost-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-input-cost`}
             title="Input cost per 1k tokens (p50 / p95)"
-            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE input_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(input_cost / input_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(input_cost / input_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE input_tokens > 0 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1755,9 +1748,9 @@ function VersionPerformanceSection({
         {/* Row 3: Output tokens + Output cost */}
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-output-tokens-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-output-tokens`}
             title="Output tokens p50 / p95"
-            query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), round(quantile(0.5)(output_tokens)) AS p50, round(quantile(0.95)(output_tokens)) AS p95 FROM llm_metrics WHERE 1=1 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1774,9 +1767,9 @@ function VersionPerformanceSection({
         </div>
         <div className="h-96">
           <MetricWidget
-            widgetKey={`prompt-${promptSlug}-perf-output-cost-${versionFilters.join(",")}`}
+            widgetKey={`prompt-${promptSlug}-perf-output-cost`}
             title="Output cost per 1k tokens (p50 / p95)"
-            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE output_tokens > 0${versionFilter} GROUP BY timeBucket ORDER BY timeBucket`}
+            query={`SELECT timeBucket(), prettyFormat(quantile(0.5)(output_cost / output_tokens * 1000), 'costInDollars') AS p50, prettyFormat(quantile(0.95)(output_cost / output_tokens * 1000), 'costInDollars') AS p95 FROM llm_metrics WHERE output_tokens > 0 GROUP BY timeBucket ORDER BY timeBucket`}
             config={{
               type: "chart",
               chartType: "line",
@@ -1795,9 +1788,9 @@ function VersionPerformanceSection({
 
       <div className="h-48">
         <MetricWidget
-          widgetKey={`prompt-${promptSlug}-perf-versions-table-${versionFilters.join(",")}`}
+          widgetKey={`prompt-${promptSlug}-perf-versions-table`}
           title="Version summary"
-          query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE 1=1${versionFilter} GROUP BY prompt_version ORDER BY prompt_version DESC`}
+          query={`SELECT prompt_version, count() AS calls, round(avg(input_tokens)) AS avg_input_tokens, round(avg(output_tokens)) AS avg_output_tokens, prettyFormat(avg(total_cost), 'costInDollars') AS avg_total_cost, round(quantile(0.5)(duration) / 1000000, 1) AS p50_latency_ms, round(quantile(0.95)(duration) / 1000000, 1) AS p95_latency_ms FROM llm_metrics WHERE 1=1 GROUP BY prompt_version ORDER BY prompt_version DESC`}
           config={{ type: "table", prettyFormatting: true, sorting: [] }}
           {...widgetProps}
         />
diff --git a/apps/webapp/app/routes/resources.metric.tsx b/apps/webapp/app/routes/resources.metric.tsx
index b9bfd010128..bc6e46318e1 100644
--- a/apps/webapp/app/routes/resources.metric.tsx
+++ b/apps/webapp/app/routes/resources.metric.tsx
@@ -46,6 +46,7 @@ const MetricWidgetQuery = z.object({
   queues: z.array(z.string()).optional(),
   responseModels: z.array(z.string()).optional(),
   promptSlugs: z.array(z.string()).optional(),
+  promptVersions: z.array(z.number()).optional(),
   operations: z.array(z.string()).optional(),
   providers: z.array(z.string()).optional(),
   tags: z.array(z.string()).optional(),
@@ -80,6 +81,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     queues,
     responseModels,
     promptSlugs,
+    promptVersions,
     operations,
     providers,
     tags,
@@ -117,6 +119,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
     queues,
     responseModels,
     promptSlugs,
+    promptVersions,
     operations,
     providers,
     // Set higher concurrency if many widgets are on screen at once
@@ -274,6 +277,7 @@ export function MetricWidget({
     JSON.stringify(props.queues),
     JSON.stringify(props.responseModels),
     JSON.stringify(props.promptSlugs),
+    JSON.stringify(props.promptVersions),
     JSON.stringify(props.operations),
     JSON.stringify(props.providers),
   ]);
diff --git a/apps/webapp/app/services/queryService.server.ts b/apps/webapp/app/services/queryService.server.ts
index 6795261d26f..d6397764eb6 100644
--- a/apps/webapp/app/services/queryService.server.ts
+++ b/apps/webapp/app/services/queryService.server.ts
@@ -77,6 +77,8 @@ export type ExecuteQueryOptions<TOut extends z.ZodSchema> = Omit<
   responseModels?: string[];
   /** Filter to specific prompt slugs */
   promptSlugs?: string[];
+  /** Filter to specific prompt versions */
+  promptVersions?: number[];
   /** Filter to specific operations (e.g. ai.generateText.doGenerate) */
   operations?: string[];
   /** Filter to specific providers (e.g. openai.responses) */
@@ -137,6 +139,7 @@ export async function executeQuery<TOut extends z.ZodSchema>(
     queues,
     responseModels,
     promptSlugs,
+    promptVersions,
     operations,
     providers,
     history,
@@ -228,6 +231,10 @@ export async function executeQuery<TOut extends z.ZodSchema>(
         : undefined,
     prompt_slug:
       promptSlugs && promptSlugs.length > 0 ? { op: "in", values: promptSlugs } : undefined,
+    prompt_version:
+      promptVersions && promptVersions.length > 0
+        ? { op: "in", values: promptVersions }
+        : undefined,
     operation_id:
       operations && operations.length > 0 ? { op: "in", values: operations } : undefined,
     gen_ai_system:

From 6586bc6f19635e1ebf7d9f3e0fb16b536c5a38d7 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:11:00 +0000
Subject: [PATCH 14/24] fix: move distinct operations/providers queries to
 PromptPresenter, parallelize in dashboard loader

---
 CLAUDE.md                                     | 10 +++
 apps/webapp/CLAUDE.md                         | 10 +++
 .../presenters/v3/PromptPresenter.server.ts   | 46 +++++++++++++
 .../route.tsx                                 | 65 ++++---------------
 4 files changed, 78 insertions(+), 53 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 688ef4d8d80..68ae918f5f7 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -18,6 +18,16 @@ pnpm run dev --filter webapp  # Run webapp (http://localhost:3030)
 pnpm run dev --filter trigger.dev --filter "@trigger.dev/*"  # Watch CLI and packages
 ```
 
+### Verifying Webapp Changes
+
+**Never run `pnpm run build --filter webapp` to verify changes.** Building proves almost nothing about correctness. Instead, run typecheck from the repo root:
+
+```bash
+pnpm run typecheck --filter webapp   # ~1-2 minutes
+```
+
+Only run typecheck after major changes (new files, significant refactors, schema changes). For small edits, trust the types and let CI catch issues.
+
 ## Testing
 
 We use vitest exclusively. **Never mock anything** - use testcontainers instead.
diff --git a/apps/webapp/CLAUDE.md b/apps/webapp/CLAUDE.md
index d1533e9808a..789c1c35415 100644
--- a/apps/webapp/CLAUDE.md
+++ b/apps/webapp/CLAUDE.md
@@ -2,6 +2,16 @@
 
 Remix 2.1.0 app serving as the main API, dashboard, and orchestration engine. Uses an Express server (`server.ts`).
 
+## Verifying Changes
+
+**Never run `pnpm run build --filter webapp` to verify changes.** Building proves almost nothing about correctness. Instead, run typecheck from the repo root:
+
+```bash
+pnpm run typecheck --filter webapp   # ~1-2 minutes
+```
+
+Only run typecheck after major changes (new files, significant refactors, schema changes). For small edits, trust the types and let CI catch issues.
+
 ## Key File Locations
 
 - **Trigger API**: `app/routes/api.v1.tasks.$taskId.trigger.ts`
diff --git a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
index 77c94bd42ad..1335c50f2d4 100644
--- a/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/PromptPresenter.server.ts
@@ -365,6 +365,52 @@ export class PromptPresenter extends BasePresenter {
     }
     return rows.map((r) => r.prompt_slug);
   }
+
+  async getDistinctOperations(
+    organizationId: string,
+    projectId: string,
+    environmentId: string
+  ): Promise<string[]> {
+    const queryFn = this.clickhouse.reader.query({
+      name: "getDistinctOperations",
+      query: `SELECT DISTINCT operation_id FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND operation_id != '' ORDER BY operation_id`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ operation_id: z.string() }),
+    });
+
+    const [error, rows] = await queryFn({ organizationId, projectId, environmentId });
+    if (error) {
+      return [];
+    }
+    return rows.map((r) => r.operation_id);
+  }
+
+  async getDistinctProviders(
+    organizationId: string,
+    projectId: string,
+    environmentId: string
+  ): Promise<string[]> {
+    const queryFn = this.clickhouse.reader.query({
+      name: "getDistinctProviders",
+      query: `SELECT DISTINCT gen_ai_system FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND gen_ai_system != '' ORDER BY gen_ai_system`,
+      params: z.object({
+        organizationId: z.string(),
+        projectId: z.string(),
+        environmentId: z.string(),
+      }),
+      schema: z.object({ gen_ai_system: z.string() }),
+    });
+
+    const [error, rows] = await queryFn({ organizationId, projectId, environmentId });
+    if (error) {
+      return [];
+    }
+    return rows.map((r) => r.gen_ai_system);
+  }
 }
 
 function encodeCursor(startTime: string, spanId: string): string {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
index 6b52976bf7a..57b6b71db6f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboards.$dashboardKey/route.tsx
@@ -98,59 +98,18 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     }
   }
 
-  let possiblePrompts: string[] = [];
-  if (filters.includes("prompts")) {
-    const promptPresenter = new PromptPresenter(clickhouseClient);
-    possiblePrompts = await promptPresenter.getDistinctPromptSlugs(
-      project.organizationId,
-      project.id,
-      environment.id
-    );
-  }
-
-  let possibleOperations: string[] = [];
-  if (filters.includes("operations")) {
-    const queryFn = clickhouseClient.reader.query({
-      name: "getDistinctOperations",
-      query: `SELECT DISTINCT operation_id FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND operation_id != '' ORDER BY operation_id`,
-      params: z.object({
-        organizationId: z.string(),
-        projectId: z.string(),
-        environmentId: z.string(),
-      }),
-      schema: z.object({ operation_id: z.string() }),
-    });
-    const [error, rows] = await queryFn({
-      organizationId: project.organizationId,
-      projectId: project.id,
-      environmentId: environment.id,
-    });
-    if (!error) {
-      possibleOperations = rows.map((r) => r.operation_id);
-    }
-  }
-
-  let possibleProviders: string[] = [];
-  if (filters.includes("providers")) {
-    const queryFn = clickhouseClient.reader.query({
-      name: "getDistinctProviders",
-      query: `SELECT DISTINCT gen_ai_system FROM trigger_dev.llm_metrics_v1 WHERE organization_id = {organizationId: String} AND project_id = {projectId: String} AND environment_id = {environmentId: String} AND gen_ai_system != '' ORDER BY gen_ai_system`,
-      params: z.object({
-        organizationId: z.string(),
-        projectId: z.string(),
-        environmentId: z.string(),
-      }),
-      schema: z.object({ gen_ai_system: z.string() }),
-    });
-    const [error, rows] = await queryFn({
-      organizationId: project.organizationId,
-      projectId: project.id,
-      environmentId: environment.id,
-    });
-    if (!error) {
-      possibleProviders = rows.map((r) => r.gen_ai_system);
-    }
-  }
+  const promptPresenter = new PromptPresenter(clickhouseClient);
+  const [possiblePrompts, possibleOperations, possibleProviders] = await Promise.all([
+    filters.includes("prompts")
+      ? promptPresenter.getDistinctPromptSlugs(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+    filters.includes("operations")
+      ? promptPresenter.getDistinctOperations(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+    filters.includes("providers")
+      ? promptPresenter.getDistinctProviders(project.organizationId, project.id, environment.id)
+      : ([] as string[]),
+  ]);
 
   return typedjson({
     ...dashboard,

From f267bba10a63b2e1e5018efaeb619b54f82a238d Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:12:30 +0000
Subject: [PATCH 15/24] fix: increase generations polling interval from 5s to
 10s

---
 .../route.tsx                                                 | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 437ec1def25..a1deff6fdcb 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -1235,9 +1235,9 @@ function GenerationsTab({
     }
   }, [fetcher.data, fetcher.state]);
 
-  // Poll for new generations every 10 seconds (also on focus/visibility)
+  // Poll for new generations periodically (also on focus/visibility)
   useInterval({
-    interval: 5_000,
+    interval: 10_000,
     onLoad: false,
     callback: () => {
       if (pollFetcher.state !== "idle") return;

From dc7f1ade65b298bad9ed9e75128ed9866ffb97a4 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:13:25 +0000
Subject: [PATCH 16/24] fix: remove unused private methods from PromptService

---
 .../app/v3/services/promptService.server.ts       | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/apps/webapp/app/v3/services/promptService.server.ts b/apps/webapp/app/v3/services/promptService.server.ts
index cae9c3c015c..ab2729fc235 100644
--- a/apps/webapp/app/v3/services/promptService.server.ts
+++ b/apps/webapp/app/v3/services/promptService.server.ts
@@ -159,19 +159,4 @@ export class PromptService extends BaseService {
     `;
   }
 
-  async #addLabel(versionId: string, label: string) {
-    await this._prisma.$executeRaw`
-      UPDATE "prompt_versions"
-      SET "labels" = array_append("labels", ${label})
-      WHERE "id" = ${versionId} AND NOT (${label} = ANY("labels"))
-    `;
-  }
-
-  async #getNextVersionNumber(promptId: string): Promise<number> {
-    const latest = await this._prisma.promptVersion.findFirst({
-      where: { promptId },
-      orderBy: { version: "desc" },
-    });
-    return (latest?.version ?? 0) + 1;
-  }
 }

From 543bf2cfb4bfd871768de4ab5856569449ead389 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:21:16 +0000
Subject: [PATCH 17/24] refactor: extract shared AI span helpers,
 SpanMetricRow, parsePeriodToMs; remove duplicate GenerationRow type

---
 .../components/runs/v3/PromptSpanDetails.tsx  |  19 +---
 .../runs/v3/ai/AIEmbedSpanDetails.tsx         |  18 +---
 .../components/runs/v3/ai/AISpanDetails.tsx   |  18 +---
 .../runs/v3/ai/AIToolCallSpanDetails.tsx      |  26 +----
 .../components/runs/v3/ai/SpanMetricRow.tsx   |  10 ++
 .../app/components/runs/v3/ai/aiHelpers.ts    | 100 ++++++++++++++++++
 .../runs/v3/ai/extractAISpanData.ts           |  76 +------------
 .../runs/v3/ai/extractAISummarySpanData.ts    |  73 +------------
 .../route.tsx                                 |  36 +------
 ...nvParam.prompts.$promptSlug.generations.ts |  20 +---
 apps/webapp/app/utils/periods.ts              |  19 ++++
 11 files changed, 142 insertions(+), 273 deletions(-)
 create mode 100644 apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
 create mode 100644 apps/webapp/app/components/runs/v3/ai/aiHelpers.ts
 create mode 100644 apps/webapp/app/utils/periods.ts

diff --git a/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
index 9e8c1fc2b76..304f47220b7 100644
--- a/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/PromptSpanDetails.tsx
@@ -1,8 +1,9 @@
 import { lazy, Suspense, useState } from "react";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { Header3 } from "~/components/primitives/Headers";
-
 import { TextLink } from "~/components/primitives/TextLink";
+import { tryPrettyJson } from "./ai/aiHelpers";
+import { SpanMetricRow as MetricRow } from "./ai/SpanMetricRow";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -145,19 +146,3 @@ export function PromptSpanDetails({ promptData }: { promptData: PromptSpanData }
   );
 }
 
-function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
-      <span className="text-text-dimmed">{label}</span>
-      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
-    </div>
-  );
-}
-
-function tryPrettyJson(raw: string): string {
-  try {
-    return JSON.stringify(JSON.parse(raw), null, 2);
-  } catch {
-    return raw;
-  }
-}
diff --git a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
index 6eb9d80b770..26794e2f9db 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIEmbedSpanDetails.tsx
@@ -1,5 +1,7 @@
 import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
+import { formatDuration } from "./aiHelpers";
+import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
 export type AIEmbedData = {
   model: string;
@@ -62,19 +64,3 @@ export function AIEmbedSpanDetails({ data }: { data: AIEmbedData }) {
   );
 }
 
-function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
-      <span className="text-text-dimmed">{label}</span>
-      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
-    </div>
-  );
-}
-
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${Math.round(ms)}ms`;
-  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
-  const mins = Math.floor(ms / 60_000);
-  const secs = ((ms % 60_000) / 1000).toFixed(0);
-  return `${mins}m ${secs}s`;
-}
diff --git a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
index 5972a54c17f..c2fc4df6069 100644
--- a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -5,6 +5,8 @@ import { Header3 } from "~/components/primitives/Headers";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextLink } from "~/components/primitives/TextLink";
+import { tryPrettyJson } from "./aiHelpers";
+import { SpanMetricRow as PromptMetricRow } from "./SpanMetricRow";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
@@ -293,22 +295,6 @@ function PromptTab({
   );
 }
 
-function PromptMetricRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
-      <span className="text-text-dimmed">{label}</span>
-      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
-    </div>
-  );
-}
-
-function tryPrettyJson(value: string): string {
-  try {
-    return JSON.stringify(JSON.parse(value), null, 2);
-  } catch {
-    return value;
-  }
-}
 
 // ---------------------------------------------------------------------------
 // Helpers
diff --git a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
index a765f0234b1..078f0b18d47 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIToolCallSpanDetails.tsx
@@ -1,6 +1,8 @@
 import { Header3 } from "~/components/primitives/Headers";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
+import { formatDuration, tryPrettyJson } from "./aiHelpers";
+import { SpanMetricRow as MetricRow } from "./SpanMetricRow";
 
 export type AIToolCallData = {
   toolName: string;
@@ -72,27 +74,3 @@ export function AIToolCallSpanDetails({ data }: { data: AIToolCallData }) {
   );
 }
 
-function MetricRow({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
-      <span className="text-text-dimmed">{label}</span>
-      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
-    </div>
-  );
-}
-
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${Math.round(ms)}ms`;
-  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
-  const mins = Math.floor(ms / 60_000);
-  const secs = ((ms % 60_000) / 1000).toFixed(0);
-  return `${mins}m ${secs}s`;
-}
-
-function tryPrettyJson(value: string): string {
-  try {
-    return JSON.stringify(JSON.parse(value), null, 2);
-  } catch {
-    return value;
-  }
-}
diff --git a/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx b/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
new file mode 100644
index 00000000000..81a96affdb6
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/SpanMetricRow.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export function SpanMetricRow({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div className="grid h-7 grid-cols-[1fr_auto] items-center gap-4 rounded-sm px-1.5 transition odd:bg-charcoal-750/40 @[28rem]:grid-cols-[8rem_1fr] hover:bg-white/[0.04]">
+      <span className="text-text-dimmed">{label}</span>
+      <span className="text-right text-text-bright @[28rem]:text-left">{value}</span>
+    </div>
+  );
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/aiHelpers.ts b/apps/webapp/app/components/runs/v3/ai/aiHelpers.ts
new file mode 100644
index 00000000000..f9891aaa23d
--- /dev/null
+++ b/apps/webapp/app/components/runs/v3/ai/aiHelpers.ts
@@ -0,0 +1,100 @@
+// Shared primitive helpers for AI span data extraction
+
+export function rec(v: unknown): Record<string, unknown> {
+  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
+}
+
+export function str(v: unknown): string | undefined {
+  return typeof v === "string" ? v : undefined;
+}
+
+export function num(v: unknown): number | undefined {
+  return typeof v === "number" ? v : undefined;
+}
+
+export function tryPrettyJson(value: string): string {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  const mins = Math.floor(ms / 60_000);
+  const secs = ((ms % 60_000) / 1000).toFixed(0);
+  return `${mins}m ${secs}s`;
+}
+
+/**
+ * Parse provider metadata from a JSON string.
+ * Handles Anthropic, Azure, OpenAI, Gateway, and OpenRouter formats.
+ */
+export function parseProviderMetadata(
+  raw: unknown
+): {
+  serviceTier?: string;
+  resolvedProvider?: string;
+  gatewayCost?: string;
+  responseId?: string;
+} | undefined {
+  if (typeof raw !== "string") return undefined;
+  try {
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    if (!parsed || typeof parsed !== "object") return undefined;
+
+    let serviceTier: string | undefined;
+    let resolvedProvider: string | undefined;
+    let gatewayCost: string | undefined;
+    let responseId: string | undefined;
+
+    // Anthropic: { anthropic: { usage: { service_tier: "standard" } } }
+    const anthropic = rec(parsed.anthropic);
+    serviceTier = str(rec(anthropic.usage).service_tier);
+
+    // Azure/OpenAI: { azure: { serviceTier: "default" } } or { openai: { serviceTier: "..." } }
+    const openai = rec(parsed.openai);
+    if (!serviceTier) {
+      serviceTier = str(rec(parsed.azure).serviceTier) ?? str(openai.serviceTier);
+    }
+
+    // OpenAI response ID
+    responseId = str(openai.responseId);
+
+    // Gateway: { gateway: { routing: { finalProvider, resolvedProvider }, cost } }
+    const gateway = rec(parsed.gateway);
+    const routing = rec(gateway.routing);
+    resolvedProvider = str(routing.finalProvider) ?? str(routing.resolvedProvider);
+    gatewayCost = str(gateway.cost);
+
+    // OpenRouter: { openrouter: { provider: "xAI" } }
+    if (!resolvedProvider) {
+      resolvedProvider = str(rec(parsed.openrouter).provider);
+    }
+
+    if (!serviceTier && !resolvedProvider && !gatewayCost && !responseId) return undefined;
+    return { serviceTier, resolvedProvider, gatewayCost, responseId };
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Extract user-defined telemetry metadata, coercing non-string values.
+ * Skips the "prompt" key which is handled separately.
+ */
+export function extractTelemetryMetadata(raw: unknown): Record<string, string> | undefined {
+  if (!raw || typeof raw !== "object") return undefined;
+
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(raw as Record<string, unknown>)) {
+    if (key === "prompt") continue;
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      result[key] = String(value);
+    }
+  }
+
+  return Object.keys(result).length > 0 ? result : undefined;
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
index a98522ba9aa..73c5418e488 100644
--- a/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISpanData.ts
@@ -1,3 +1,4 @@
+import { rec, str, num, parseProviderMetadata, extractTelemetryMetadata } from "./aiHelpers";
 import type { AISpanData, DisplayItem, ToolDefinition, ToolUse } from "./types";
 
 /**
@@ -97,22 +98,6 @@ export function extractAISpanData(
   };
 }
 
-// ---------------------------------------------------------------------------
-// Primitive helpers
-// ---------------------------------------------------------------------------
-
-function rec(v: unknown): Record<string, unknown> {
-  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
-}
-
-function str(v: unknown): string | undefined {
-  return typeof v === "string" ? v : undefined;
-}
-
-function num(v: unknown): number | undefined {
-  return typeof v === "number" ? v : undefined;
-}
-
 // ---------------------------------------------------------------------------
 // Message → DisplayItem transformation
 // ---------------------------------------------------------------------------
@@ -431,49 +416,6 @@ function parseToolDefinitions(raw: unknown): ToolDefinition[] | undefined {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Provider metadata (service tier, inference geo, etc.)
-// ---------------------------------------------------------------------------
-
-function parseProviderMetadata(
-  raw: unknown
-): { serviceTier?: string; resolvedProvider?: string; gatewayCost?: string } | undefined {
-  if (typeof raw !== "string") return undefined;
-  try {
-    const parsed = JSON.parse(raw) as Record<string, unknown>;
-    if (!parsed || typeof parsed !== "object") return undefined;
-
-    let serviceTier: string | undefined;
-    let resolvedProvider: string | undefined;
-    let gatewayCost: string | undefined;
-
-    // Anthropic: { anthropic: { usage: { service_tier: "standard" } } }
-    const anthropic = rec(parsed.anthropic);
-    serviceTier = str(rec(anthropic.usage).service_tier);
-
-    // Azure/OpenAI: { azure: { serviceTier: "default" } } or { openai: { serviceTier: "..." } }
-    if (!serviceTier) {
-      serviceTier = str(rec(parsed.azure).serviceTier) ?? str(rec(parsed.openai).serviceTier);
-    }
-
-    // Gateway: { gateway: { routing: { finalProvider, resolvedProvider }, cost } }
-    const gateway = rec(parsed.gateway);
-    const routing = rec(gateway.routing);
-    resolvedProvider = str(routing.finalProvider) ?? str(routing.resolvedProvider);
-    gatewayCost = str(gateway.cost);
-
-    // OpenRouter: { openrouter: { provider: "xAI" } }
-    if (!resolvedProvider) {
-      resolvedProvider = str(rec(parsed.openrouter).provider);
-    }
-
-    if (!serviceTier && !resolvedProvider && !gatewayCost) return undefined;
-    return { serviceTier, resolvedProvider, gatewayCost };
-  } catch {
-    return undefined;
-  }
-}
-
 // ---------------------------------------------------------------------------
 // Tool choice parsing
 // ---------------------------------------------------------------------------
@@ -508,19 +450,3 @@ function countMessages(raw: unknown): number | undefined {
   }
 }
 
-// ---------------------------------------------------------------------------
-// Telemetry metadata
-// ---------------------------------------------------------------------------
-
-function extractTelemetryMetadata(raw: unknown): Record<string, string> | undefined {
-  if (!raw || typeof raw !== "object") return undefined;
-
-  const result: Record<string, string> = {};
-  for (const [key, value] of Object.entries(raw as Record<string, unknown>)) {
-    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
-      result[key] = String(value);
-    }
-  }
-
-  return Object.keys(result).length > 0 ? result : undefined;
-}
diff --git a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
index 2eda2c71635..7851ac996f2 100644
--- a/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
+++ b/apps/webapp/app/components/runs/v3/ai/extractAISummarySpanData.ts
@@ -1,3 +1,4 @@
+import { rec, str, num, parseProviderMetadata, extractTelemetryMetadata } from "./aiHelpers";
 import type { AISpanData, DisplayItem } from "./types";
 
 /**
@@ -114,22 +115,6 @@ export function extractAISummarySpanData(
   };
 }
 
-// ---------------------------------------------------------------------------
-// Primitive helpers
-// ---------------------------------------------------------------------------
-
-function rec(v: unknown): Record<string, unknown> {
-  return v && typeof v === "object" ? (v as Record<string, unknown>) : {};
-}
-
-function str(v: unknown): string | undefined {
-  return typeof v === "string" ? v : undefined;
-}
-
-function num(v: unknown): number | undefined {
-  return typeof v === "number" ? v : undefined;
-}
-
 // ---------------------------------------------------------------------------
 // Prompt parsing
 // ---------------------------------------------------------------------------
@@ -208,59 +193,3 @@ function extractMessageContent(content: unknown): string | undefined {
   return undefined;
 }
 
-// ---------------------------------------------------------------------------
-// Provider metadata
-// ---------------------------------------------------------------------------
-
-function parseProviderMetadata(
-  raw: unknown
-): { serviceTier?: string; resolvedProvider?: string; responseId?: string } | undefined {
-  const jsonStr = str(raw);
-  if (!jsonStr) return undefined;
-
-  try {
-    const parsed = JSON.parse(jsonStr) as Record<string, any>;
-    if (!parsed || typeof parsed !== "object") return undefined;
-
-    let serviceTier: string | undefined;
-    let responseId: string | undefined;
-
-    // OpenAI
-    if (parsed.openai) {
-      serviceTier = parsed.openai.serviceTier;
-      responseId = parsed.openai.responseId;
-    }
-
-    // Anthropic
-    if (parsed.anthropic?.usage?.service_tier) {
-      serviceTier = parsed.anthropic.usage.service_tier;
-    }
-
-    return serviceTier || responseId
-      ? { serviceTier, responseId }
-      : undefined;
-  } catch {
-    return undefined;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Telemetry metadata
-// ---------------------------------------------------------------------------
-
-function extractTelemetryMetadata(
-  metadata: unknown
-): Record<string, string> | undefined {
-  if (!metadata || typeof metadata !== "object") return undefined;
-
-  const result: Record<string, string> = {};
-  for (const [key, value] of Object.entries(metadata as Record<string, unknown>)) {
-    // Skip prompt metadata (handled separately) and non-string values
-    if (key === "prompt") continue;
-    if (typeof value === "string") {
-      result[key] = value;
-    }
-  }
-
-  return Object.keys(result).length > 0 ? result : undefined;
-}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index a1deff6fdcb..810a1ace29f 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -60,7 +60,7 @@ import { useInterval } from "~/hooks/useInterval";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
-import { PromptPresenter } from "~/presenters/v3/PromptPresenter.server";
+import { PromptPresenter, type GenerationRow } from "~/presenters/v3/PromptPresenter.server";
 import { getResizableSnapshot } from "~/services/resizablePanel.server";
 import { requireUserId } from "~/services/session.server";
 import { PromptService } from "~/v3/services/promptService.server";
@@ -70,6 +70,7 @@ import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { InlineCode } from "~/components/code/InlineCode";
 import { TextLink } from "~/components/primitives/TextLink";
 import { EnvironmentParamSchema, v3PromptsPath, v3RunSpanPath } from "~/utils/pathBuilder";
+import { parsePeriodToMs } from "~/utils/periods";
 import { z } from "zod";
 
 const ParamSchema = EnvironmentParamSchema.extend({
@@ -335,25 +336,6 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 
 // ─── Helpers ─────────────────────────────────────────────
 
-function parsePeriodToMs(period: string): number {
-  const match = period.match(/^(\d+)([mhdw])$/);
-  if (!match) return 7 * 24 * 60 * 60 * 1000; // default 7d
-  const [, numStr, unit] = match;
-  const num = parseInt(numStr, 10);
-  switch (unit) {
-    case "m":
-      return num * 60 * 1000;
-    case "h":
-      return num * 60 * 60 * 1000;
-    case "d":
-      return num * 24 * 60 * 60 * 1000;
-    case "w":
-      return num * 7 * 24 * 60 * 60 * 1000;
-    default:
-      return 7 * 24 * 60 * 60 * 1000;
-  }
-}
-
 type VersionData = {
   id: string;
   version: number;
@@ -1142,20 +1124,6 @@ function PreviewTab({
 
 // ─── Generations Tab ─────────────────────────────────────
 
-type GenerationRow = {
-  run_id: string;
-  span_id: string;
-  operation_id: string;
-  task_identifier: string;
-  response_model: string;
-  prompt_version: number;
-  input_tokens: number;
-  output_tokens: number;
-  total_cost: number;
-  duration_ms: number;
-  start_time: string;
-};
-
 function GenerationsTab({
   promptSlug,
   initialGenerations,
diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
index 8ca8fdb35a8..77a55ec3f0b 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug.generations.ts
@@ -3,6 +3,7 @@ import { json } from "@remix-run/node";
 import { z } from "zod";
 import { requireUserId } from "~/services/session.server";
 import { EnvironmentParamSchema } from "~/utils/pathBuilder";
+import { parsePeriodToMs } from "~/utils/periods";
 import { findProjectBySlug } from "~/models/project.server";
 import { findEnvironmentBySlug } from "~/models/runtimeEnvironment.server";
 import { clickhouseClient } from "~/services/clickhouseInstance.server";
@@ -19,25 +20,6 @@ export type GenerationsResponse = {
   pagination: GenerationsPagination;
 };
 
-function parsePeriodToMs(period: string): number {
-  const match = period.match(/^(\d+)([mhdw])$/);
-  if (!match) return 7 * 24 * 60 * 60 * 1000;
-  const [, numStr, unit] = match;
-  const num = parseInt(numStr, 10);
-  switch (unit) {
-    case "m":
-      return num * 60 * 1000;
-    case "h":
-      return num * 60 * 60 * 1000;
-    case "d":
-      return num * 24 * 60 * 60 * 1000;
-    case "w":
-      return num * 7 * 24 * 60 * 60 * 1000;
-    default:
-      return 7 * 24 * 60 * 60 * 1000;
-  }
-}
-
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const { projectParam, organizationSlug, envParam, promptSlug } =
diff --git a/apps/webapp/app/utils/periods.ts b/apps/webapp/app/utils/periods.ts
new file mode 100644
index 00000000000..cdd576e9988
--- /dev/null
+++ b/apps/webapp/app/utils/periods.ts
@@ -0,0 +1,19 @@
+/** Convert a period string like "7d", "24h", "30m" to milliseconds. Defaults to 7d. */
+export function parsePeriodToMs(period: string): number {
+  const match = period.match(/^(\d+)([mhdw])$/);
+  if (!match) return 7 * 24 * 60 * 60 * 1000;
+  const [, numStr, unit] = match;
+  const num = parseInt(numStr, 10);
+  switch (unit) {
+    case "m":
+      return num * 60 * 1000;
+    case "h":
+      return num * 60 * 60 * 1000;
+    case "d":
+      return num * 24 * 60 * 60 * 1000;
+    case "w":
+      return num * 7 * 24 * 60 * 60 * 1000;
+    default:
+      return 7 * 24 * 60 * 60 * 1000;
+  }
+}

From 251e46f336ae78badf9ad8c2b0515b2e983b68cc Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 15:34:58 +0000
Subject: [PATCH 18/24] fix: wrap prompt version label removal + creation in
 transaction to prevent orphaned labels on concurrent deploy

---
 .../services/createBackgroundWorker.server.ts | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
index 4cb471b5c35..ed5e810f158 100644
--- a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
+++ b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
@@ -780,40 +780,44 @@ async function createWorkerPrompts(
 
       const nextVersion = (latestVersion?.version ?? 0) + 1;
 
-      // Remove "latest" label from all existing versions
-      if (latestVersion) {
-        await prisma.$executeRaw`
-          UPDATE "prompt_versions"
-          SET "labels" = array_remove("labels", 'latest')
-          WHERE "promptId" = ${prompt.id} AND 'latest' = ANY("labels")
-        `;
-      }
-
       // Determine labels for the new version.
       // Deploys always move "current" to the new code version. If a dashboard
       // override exists, it sits on top via the "override" label and the API
       // serves that instead — so "current" movement is safe.
       const labels = ["latest", "current"];
 
-      // Remove "current" from any existing version
-      await prisma.$executeRaw`
-        UPDATE "prompt_versions"
-        SET "labels" = array_remove("labels", 'current')
-        WHERE "promptId" = ${prompt.id} AND 'current' = ANY("labels")
-      `;
+      // Wrap label removal + version creation in a transaction so labels
+      // aren't stripped if the create fails (e.g. concurrent deploy race).
+      await prisma.$transaction(async (tx) => {
+        // Remove "latest" label from all existing versions
+        if (latestVersion) {
+          await tx.$executeRaw`
+            UPDATE "prompt_versions"
+            SET "labels" = array_remove("labels", 'latest')
+            WHERE "promptId" = ${prompt.id} AND 'latest' = ANY("labels")
+          `;
+        }
 
-      await prisma.promptVersion.create({
-        data: {
-          promptId: prompt.id,
-          version: nextVersion,
-          textContent: contentString,
-          model: promptResource.model,
-          config: promptResource.config as any,
-          source: "code",
-          contentHash,
-          labels,
-          workerId: worker.id,
-        },
+        // Remove "current" from any existing version
+        await tx.$executeRaw`
+          UPDATE "prompt_versions"
+          SET "labels" = array_remove("labels", 'current')
+          WHERE "promptId" = ${prompt.id} AND 'current' = ANY("labels")
+        `;
+
+        await tx.promptVersion.create({
+          data: {
+            promptId: prompt.id,
+            version: nextVersion,
+            textContent: contentString,
+            model: promptResource.model,
+            config: promptResource.config as any,
+            source: "code",
+            contentHash,
+            labels,
+            workerId: worker.id,
+          },
+        });
       });
 
       logger.debug("Registered prompt version", {

From dcdad1e26f32a0f529d663ef97a916610f6f6029 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 16:02:43 +0000
Subject: [PATCH 19/24] fixed 2 validateDOMNesting console errors

---
 apps/webapp/CLAUDE.md                         | 30 +++++++++++++++++++
 .../components/runs/v3/ai/AIChatMessages.tsx  |  9 +++---
 2 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/apps/webapp/CLAUDE.md b/apps/webapp/CLAUDE.md
index 789c1c35415..6f245ae6a9d 100644
--- a/apps/webapp/CLAUDE.md
+++ b/apps/webapp/CLAUDE.md
@@ -12,6 +12,36 @@ pnpm run typecheck --filter webapp   # ~1-2 minutes
 
 Only run typecheck after major changes (new files, significant refactors, schema changes). For small edits, trust the types and let CI catch issues.
 
+## Testing Dashboard Changes with Chrome DevTools MCP
+
+Use the `chrome-devtools` MCP server to visually verify local dashboard changes. The webapp must be running (`pnpm run dev --filter webapp` from repo root).
+
+### Login
+
+```
+1. mcp__chrome-devtools__new_page(url: "http://localhost:3030")
+   → Redirects to /login
+2. mcp__chrome-devtools__click the "Continue with Email" link
+3. mcp__chrome-devtools__fill the email field with "local@trigger.dev"
+4. mcp__chrome-devtools__click "Send a magic link"
+   → Auto-logs in and redirects to the dashboard (no email verification needed locally)
+```
+
+### Navigating and Verifying
+
+- **take_snapshot**: Get an a11y tree of the page (text content, element UIDs for interaction). Prefer this over screenshots for understanding page structure.
+- **take_screenshot**: Capture what the page looks like visually. Use to verify styling, layout, and visual changes.
+- **navigate_page**: Go to specific URLs, e.g. `http://localhost:3030/orgs/references-bc08/projects/hello-world-SiWs/env/dev/runs`
+- **click / fill**: Interact with elements using UIDs from `take_snapshot`.
+- **evaluate_script**: Run JS in the browser console for debugging.
+- **list_console_messages**: Check for console errors after navigating.
+
+### Tips
+
+- Snapshots can be very large on complex pages (200K+ chars). Use `take_screenshot` first to orient, then `take_snapshot` only when you need element UIDs to interact.
+- The local seeded user email is `local@trigger.dev`.
+- Dashboard URL pattern: `http://localhost:3030/orgs/{orgSlug}/projects/{projectSlug}/env/{envSlug}/{section}`
+
 ## Key File Locations
 
 - **Trigger API**: `app/routes/api.v1.tasks.$taskId.trigger.ts`
diff --git a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
index 061090f291a..297234b8d05 100644
--- a/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AIChatMessages.tsx
@@ -9,7 +9,6 @@ import { lazy, Suspense, useState } from "react";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Header3 } from "~/components/primitives/Headers";
-import { Paragraph } from "~/components/primitives/Paragraph";
 import tablerSpritePath from "~/components/primitives/tabler-sprite.svg";
 import type { DisplayItem, ToolUse } from "./types";
 
@@ -120,11 +119,11 @@ function SystemSection({
         )}
       </div>
       <ChatBubble>
-        <Paragraph variant="small/dimmed" className="streamdown-container">
+        <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
           <Suspense fallback={<span className="whitespace-pre-wrap">{displayText}</span>}>
             <StreamdownRenderer>{displayText}</StreamdownRenderer>
           </Suspense>
-        </Paragraph>
+        </div>
       </ChatBubble>
     </div>
   );
@@ -139,11 +138,11 @@ function UserSection({ text }: { text: string }) {
     <div className="flex flex-col gap-1.5 py-2.5">
       <SectionHeader label="User" />
       <ChatBubble>
-        <Paragraph variant="small/dimmed" className="streamdown-container">
+        <div className="font-sans text-sm font-normal text-text-dimmed streamdown-container">
           <Suspense fallback={<span className="whitespace-pre-wrap">{text}</span>}>
             <StreamdownRenderer>{text}</StreamdownRenderer>
           </Suspense>
-        </Paragraph>
+        </div>
       </ChatBubble>
     </div>
   );

From ceb6391460c39697515f00dbce9202fe3f1c5667 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 16:13:24 +0000
Subject: [PATCH 20/24] fix: pre-fill override dialog model from current
 override instead of prompt default

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

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 810a1ace29f..9c4c7fe0ac4 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -733,6 +733,7 @@ export default function PromptDetailPage() {
         prompt={prompt}
         content={content}
         isEditingOverride={!!overrideVersion}
+        currentOverrideModel={overrideVersion ? versions.find((v) => v.id === overrideVersion.id)?.model ?? null : null}
         onSave={(textContent, commitMessage, model) => {
           const intent = overrideVersion ? "updateOverride" : "saveVersion";
           fetcher.submit({ intent, textContent, commitMessage, model }, { method: "POST" });
@@ -751,6 +752,7 @@ function OverrideDialog({
   prompt,
   content,
   isEditingOverride,
+  currentOverrideModel,
   onSave,
 }: {
   open: boolean;
@@ -763,20 +765,22 @@ function OverrideDialog({
   };
   content: string;
   isEditingOverride: boolean;
+  currentOverrideModel?: string | null;
   onSave: (textContent: string, commitMessage: string, model: string) => void;
 }) {
+  const effectiveModel = currentOverrideModel ?? prompt.defaultModel ?? "";
   const [editedContent, setEditedContent] = useState(content);
   const [commitMessage, setCommitMessage] = useState("");
-  const [model, setModel] = useState(prompt.defaultModel ?? "");
+  const [model, setModel] = useState(effectiveModel);
 
   // Reset when dialog opens
   useEffect(() => {
     if (open) {
       setEditedContent(content);
       setCommitMessage("");
-      setModel(prompt.defaultModel ?? "");
+      setModel(currentOverrideModel ?? prompt.defaultModel ?? "");
     }
-  }, [open, content, prompt.defaultModel]);
+  }, [open, content, currentOverrideModel, prompt.defaultModel]);
 
   const variableFields = prompt.variableSchema ? extractVariableFields(prompt.variableSchema) : [];
 
@@ -796,7 +800,7 @@ function OverrideDialog({
   const undefinedVars = [...templateVars].filter((v) => !schemaVarNames.has(v));
   const unusedVars = variableFields.filter((f) => f.required && !templateVars.has(f.name));
 
-  const hasChanges = editedContent !== content || model !== (prompt.defaultModel ?? "");
+  const hasChanges = editedContent !== content || model !== effectiveModel;
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>

From 3e6335706a5ac56050347873bdc2ffa7ce0f0cfc Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 16:16:50 +0000
Subject: [PATCH 21/24] fix: use $transaction helper instead of
 prisma.$transaction for PrismaClientOrTransaction compatibility

---
 apps/webapp/app/v3/services/createBackgroundWorker.server.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
index ed5e810f158..c191ae5f397 100644
--- a/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
+++ b/apps/webapp/app/v3/services/createBackgroundWorker.server.ts
@@ -9,7 +9,7 @@ import {
 import { BackgroundWorkerId } from "@trigger.dev/core/v3/isomorphic";
 import type { BackgroundWorker, TaskQueue, TaskQueueType } from "@trigger.dev/database";
 import cronstrue from "cronstrue";
-import { Prisma, PrismaClientOrTransaction } from "~/db.server";
+import { $transaction, Prisma, PrismaClientOrTransaction } from "~/db.server";
 import { sanitizeQueueName } from "~/models/taskQueue.server";
 import { AuthenticatedEnvironment } from "~/services/apiAuth.server";
 import { logger } from "~/services/logger.server";
@@ -788,7 +788,7 @@ async function createWorkerPrompts(
 
       // Wrap label removal + version creation in a transaction so labels
       // aren't stripped if the create fails (e.g. concurrent deploy race).
-      await prisma.$transaction(async (tx) => {
+      await $transaction(prisma, async (tx) => {
         // Remove "latest" label from all existing versions
         if (latestVersion) {
           await tx.$executeRaw`

From 224af6fa25f62a23d3d2bf983bade4d745ea0de2 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 16:19:19 +0000
Subject: [PATCH 22/24] chore: add changeset and server-changes for AI prompt
 management

---
 .changeset/ai-prompt-management.md      |  5 +++++
 .server-changes/ai-prompt-management.md | 30 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 .changeset/ai-prompt-management.md
 create mode 100644 .server-changes/ai-prompt-management.md

diff --git a/.changeset/ai-prompt-management.md b/.changeset/ai-prompt-management.md
new file mode 100644
index 00000000000..d3250bebda7
--- /dev/null
+++ b/.changeset/ai-prompt-management.md
@@ -0,0 +1,5 @@
+---
+"@trigger.dev/sdk": patch
+---
+
+Define and manage AI prompts with `prompts.define()`. Create typesafe prompt templates with variables, resolve them at runtime, and manage versions and overrides from the dashboard without redeploying.
diff --git a/.server-changes/ai-prompt-management.md b/.server-changes/ai-prompt-management.md
new file mode 100644
index 00000000000..624ec391047
--- /dev/null
+++ b/.server-changes/ai-prompt-management.md
@@ -0,0 +1,30 @@
+---
+area: webapp
+type: feature
+---
+
+AI prompt management dashboard and enhanced span inspectors.
+
+**Prompt management:**
+- Prompts list page with version status, model, override indicators, and 24h usage sparklines
+- Prompt detail page with template viewer, variable preview, version history timeline, and override editor
+- Create, edit, and remove overrides to change prompt content or model without redeploying
+- Promote any code-deployed version to current
+- Generations tab with infinite scroll, live polling, and inline span inspector
+- Per-prompt metrics: total generations, avg tokens, avg cost, latency, with version-level breakdowns
+
+**AI span inspectors:**
+- Custom inspectors for `ai.generateText`, `ai.streamText`, `ai.generateObject`, `ai.streamObject` parent spans
+- `ai.toolCall` inspector showing tool name, call ID, and input arguments
+- `ai.embed` inspector showing model, provider, and input text
+- Prompt tab on AI spans linking to prompt version with template and input variables
+- Compact timestamp and duration header on all AI span inspectors
+
+**AI metrics dashboard:**
+- Operations, Providers, and Prompts filters on the AI Metrics dashboard
+- Cost by prompt widget
+- "AI" section in the sidebar with Prompts and AI Metrics links
+
+**Other improvements:**
+- Resizable panel sizes now persist across page refreshes
+- Fixed `<div>` inside `<p>` DOM nesting warnings in span titles and chat messages

From 5ba393a2155391ed118328a5ccb31c00f8307ac8 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 18:41:37 +0000
Subject: [PATCH 23/24] fix: include prompt entity type in isAiInspector to
 avoid nested scroll containers

---
 .../route.tsx                                                  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
index fdd9f0d3513..7ec1b150af9 100644
--- a/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
+++ b/apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route.tsx
@@ -258,7 +258,8 @@ function SpanBody({
     span.entity?.type === "ai-generation" ||
     span.entity?.type === "ai-summary" ||
     span.entity?.type === "ai-tool-call" ||
-    span.entity?.type === "ai-embed";
+    span.entity?.type === "ai-embed" ||
+    span.entity?.type === "prompt";
 
   return (
     <div className={cn(

From 8cd61cf15834b37f4bf0fded0b5445fce0188d86 Mon Sep 17 00:00:00 2001
From: Eric Allam <eallam@icloud.com>
Date: Sun, 22 Mar 2026 19:02:12 +0000
Subject: [PATCH 24/24] fix: override edit dialog uses override version content
 instead of selected version content

---
 .../route.tsx                                                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
index 9c4c7fe0ac4..dc84de22bae 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx
@@ -731,7 +731,7 @@ export default function PromptDetailPage() {
         open={overrideDialogOpen}
         onOpenChange={setOverrideDialogOpen}
         prompt={prompt}
-        content={content}
+        content={overrideVersion ? getVersionContent(versions.find((v) => v.id === overrideVersion.id) ?? { textContent: null }) : content}
         isEditingOverride={!!overrideVersion}
         currentOverrideModel={overrideVersion ? versions.find((v) => v.id === overrideVersion.id)?.model ?? null : null}
         onSave={(textContent, commitMessage, model) => {