feat: AI prompt management dashboard and enhanced span inspectors (#3244)

- Full prompt management UI: list, detail, override, and version
management for AI prompts defined with `prompts.define()`
- Rich AI span inspectors for all AI SDK operations with token usage,
messages, and prompt context
- Real-time generation tracking with live polling and filtering

## Prompt management

Define prompts in your code with `prompts.define()`, then manage
versions and overrides from the dashboard without redeploying:

```typescript
import { task, prompts } from "@trigger.dev/sdk";
import { generateText } from "ai";
import { openai } from "@ai-sdk/openai";
import { z } from "zod";

const supportPrompt = prompts.define({
  id: "customer-support",
  model: "gpt-4o",
  variables: z.object({
    customerName: z.string(),
    plan: z.string(),
    issue: z.string(),
  }),
  content: `You are a support agent for Acme SaaS.
Customer: {{customerName}} ({{plan}} plan)
Issue: {{issue}}
Respond with empathy and precision.`,
});

export const supportTask = task({
  id: "handle-support",
  run: async (payload) => {
    const resolved = await supportPrompt.resolve({
      customerName: payload.name,
      plan: payload.plan,
      issue: payload.issue,
    });

    const result = await generateText({
      model: openai(resolved.model ?? "gpt-4o"),
      system: resolved.text,
      prompt: payload.issue,
      ...resolved.toAISDKTelemetry(),
    });

    return { response: result.text };
  },
});
```

The prompts list page shows each prompt with its current version, model,
override status, and a usage sparkline over the last 24 hours.

From the prompt detail page you can:

- **Create overrides** to change the prompt template or model without
redeploying. Overrides take priority over the deployed version when
`prompt.resolve()` is called.
- **Promote** any code-deployed version to be the current version
- **Browse generations** across all versions with infinite scroll and
live polling for new results
- **Filter** by version, model, operation type, and provider
- **View metrics** (total generations, avg tokens, avg cost, latency)
broken down by version

## AI span inspectors

Every AI SDK operation now gets a custom inspector in the run trace
view:

- **`ai.generateText` / `ai.streamText`** — Shows model, token usage,
cost, the full message thread (system prompt, user message, assistant
response), and linked prompt details
- **`ai.generateObject` / `ai.streamObject`** — Same as above plus the
JSON schema and structured output
- **`ai.toolCall`** — Shows tool name, call ID, and input arguments
- **`ai.embed`** — Shows model and the text being embedded

For generation spans linked to a prompt, a "Prompt" tab shows the prompt
metadata, the input variables passed to `resolve()`, and the template
content from the prompt version.

All AI span inspectors include a compact timestamp and duration header.

## Other improvements

- Resizable panel sizes now persist across page refreshes (patched
`@window-splitter/state` to fix snapshot restoration)
- Run page panels also persist their sizes
- Fixed `<div>` inside `<p>` DOM nesting warnings in span titles and
chat messages
- Added Operations and Providers filters to the AI metrics dashboard

## Screenshots

<img width="3680" height="2392" alt="CleanShot 2026-03-21 at 10 14
17@2x"
src="https://github.com/user-attachments/assets/f3e59989-a2fa-4990-a9d0-3cacda431868"
/>

<img width="3680" height="2392" alt="CleanShot 2026-03-21 at 10 15
37@2x"
src="https://github.com/user-attachments/assets/2f2d02df-2d2b-44fb-ac6f-9153f6a6c387"
/>

<img width="3680" height="2392" alt="CleanShot 2026-03-21 at 10 15
54@2x"
src="https://github.com/user-attachments/assets/baa161e0-ef91-4fa4-a55f-986b71cccdf0"
/>

Author: ericallam

.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.

.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

CLAUDE.md

@@ -18,6 +18,25 @@ pnpm run dev --filter webapp  # Run webapp (http://localhost:3030)
 pnpm run dev --filter trigger.dev --filter "@trigger.dev/*"  # Watch CLI and packages
 ```
 
+### Verifying Changes
+
+The verification command depends on where the change lives:
+
+- **Apps and internal packages** (`apps/*`, `internal-packages/*`): Use `typecheck`. **Never use `build`** for these — building proves almost nothing about correctness.
+- **Public packages** (`packages/*`): Use `build`.
+
+```bash
+# Apps and internal packages — use typecheck
+pnpm run typecheck --filter webapp                  # ~1-2 minutes
+pnpm run typecheck --filter @internal/run-engine
+
+# Public packages — use build
+pnpm run build --filter @trigger.dev/sdk
+pnpm run build --filter @trigger.dev/core
+```
+
+Only run typecheck/build 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.

apps/webapp/CLAUDE.md

@@ -2,6 +2,48 @@
 
 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. The webapp is an app, not a public package — use 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.
+
+Note: Public packages (`packages/*`) use `build` instead. See the root CLAUDE.md for details.
+
+## 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`

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>
+  );
+}

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,13 +1023,16 @@ export const TSQLResultsTable = memo(function TSQLResultsTable({
   prettyFormatting = true,
   sorting: defaultSorting = [],
   showHeaderOnEmpty = false,
+  hiddenColumns,
 }: {
   rows: Record<string, unknown>[];
   columns: OutputColumnMetadata[];
   prettyFormatting?: boolean;
   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