feat: AI prompt management dashboard and enhanced span inspectors

.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