+ {messages.map((msg) => (
+
+ );
+}
+
+// Memoized so stable messages (anything older than the one currently
+// streaming) don't re-render on every chunk. This matters a lot during
+// `resumeStream()` history replay, where each re-render would otherwise
+// re-run Prism highlighting on every tool-call CodeBlock in the list.
+//
+// Default shallow prop comparison is fine: AI SDK's useChat keeps stable
+// references for messages that haven't changed, so only the last message
+// (the one receiving new chunks) re-renders.
+export const MessageBubble = memo(function MessageBubble({
+ message,
+}: {
+ message: UIMessage;
+}) {
+ if (message.role === "user") {
+ const text =
+ message.parts
+ ?.filter((p) => p.type === "text")
+ .map((p) => (p as { type: "text"; text: string }).text)
+ .join("") ?? "";
+
+ return (
+
+
+ );
+ }
+
+ if (message.role === "assistant") {
+ const hasContent = message.parts && message.parts.length > 0;
+ if (!hasContent) return null;
+
+ return (
+
+
+ {text}
+
+ {message.parts?.map((part, i) => renderPart(part, i))}
+
+ );
+ }
+
+ return null;
+});
+
+export function renderPart(part: UIMessage["parts"][number], i: number) {
+ const p = part as any;
+ const type = part.type as string;
+
+ // Text — markdown rendered via AssistantResponse
+ if (type === "text") {
+ return p.text ?
+
+
+
+ );
+ }
+
+ // Tool call — type: "tool-{name}" with toolCallId, input, output, state
+ if (type.startsWith("tool-")) {
+ const toolName = type.slice(5);
+
+ // Sub-agent tool: output is a UIMessage with parts
+ const isSubAgent =
+ p.output != null && typeof p.output === "object" && Array.isArray(p.output.parts);
+
+ // For sub-agent tools, show the last text part as the "output" tab
+ // (mirrors what toModelOutput typically sends to the parent LLM)
+ // instead of dumping the full UIMessage JSON.
+ let resultOutput: string | undefined;
+ if (isSubAgent) {
+ const lastText = (p.output.parts as any[])
+ .filter((part: any) => part.type === "text" && part.text)
+ .pop();
+ resultOutput = lastText?.text ?? undefined;
+ } else if (p.output != null) {
+ resultOutput =
+ typeof p.output === "string" ? p.output : JSON.stringify(p.output, null, 2);
+ }
+
+ return (
+
+ {p.text ?? ""}
+
+
+ {p.title}
+ {p.mediaType ? ` (${p.mediaType})` : ""}
+
+ );
+ }
+
+ // File — render as image if image type, otherwise as download link
+ if (type === "file") {
+ const isImage = typeof p.mediaType === "string" && p.mediaType.startsWith("image/");
+ if (isImage) {
+ return (
+
+
+ step
+
+
+ );
+ }
+
+ // Data parts — type: "data-{name}", show as labeled JSON popover
+ if (type.startsWith("data-")) {
+ const dataName = type.slice(5);
+ return
+ data-{name}
+
+
+
+ {formatted}
+
+ {messages.length === 0 ? (
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// useAgentSessionMessages — reads both realtime streams for a session and
+// maintains a chronologically ordered, merged message list.
+// ---------------------------------------------------------------------------
+
+/**
+ * Shape of each chunk on the session's `.in` channel. Mirrors the
+ * `ChatInputChunk` tagged union produced by {@link TriggerChatTransport}:
+ * - `kind: "message"` carries a `ChatTaskWirePayload` in `.payload`
+ * (user-submitted messages or regenerate calls); we dedupe by id.
+ * - `kind: "stop"` is a stop signal — no messages, nothing to render
+ * here, so it's filtered.
+ *
+ * The server wraps records in `{data, id}` and writes `data` as a JSON
+ * string; SSE v2 delivers the parsed string back. {@link parseChunkPayload}
+ * re-parses to recover the object.
+ */
+type InputStreamChunk = {
+ kind?: "message" | "stop";
+ payload?: {
+ messages?: Array<{ id?: string; role?: string; parts?: unknown[] }>;
+ trigger?: string;
+ };
+ message?: string;
+};
+
+/**
+ * Minimal typing for the chunks we care about on the chat output stream.
+ * Covers the AI SDK `UIMessageChunk` variants that `renderPart` actually
+ * knows how to display, plus the Trigger.dev control chunks that we filter.
+ */
+type OutputChunk = { type: string; [key: string]: unknown };
+
+/**
+ * Per-message orchestration state for the output stream accumulator. Mirrors
+ * the active-part tracking that AI SDK's `processUIMessageStream` keeps in
+ * its `state` object: a registry of streaming text/reasoning parts so deltas
+ * can be matched to the right part by id, plus a way to clear them at step
+ * boundaries (`finish-step`) so the next step's `text-start`/`reasoning-start`
+ * with the same id starts a fresh part instead of appending to the previous
+ * step's part.
+ */
+/**
+ * Per-message orchestration state — index-based active-part tracking.
+ *
+ * Each map points from a part id (text or reasoning) to **the index of the
+ * currently-streaming part with that id in `message.parts`**. We need
+ * indexes (not just a `Set` of "active ids") because part ids are *only
+ * unique within a step*: the SDK happily reuses `text-start id="0"` after
+ * a `finish-step` boundary. Without index tracking, a `text-delta` for the
+ * reused id would have to find the right part by id alone — and a search
+ * would match BOTH the previous step's frozen part and the current step's
+ * fresh one, which produces a duplication where the previous text gets
+ * the new content appended to it AND a fresh part with the same content
+ * also appears.
+ *
+ * Mirrors AI SDK's `processUIMessageStream`'s `state.activeTextParts` /
+ * `state.activeReasoningParts` (which hold direct references in the
+ * mutating canonical impl). We use indexes here because we do immutable
+ * updates and need indices that survive `parts.map()` rewrites — adding
+ * new parts and updating existing ones never reorders, so an index is
+ * stable for the lifetime of the part.
+ */
+type MessageOrchestrationState = {
+ activeTextPartIndexes: Map
+
+ ) : (
+
+
+ Loading conversation…
+
+
+
+
{text}}>
{text}
@@ -257,30 +247,59 @@ function ToolUseSection({ tools }: { tools: ToolUse[] }) {
);
}
-type ToolTab = "input" | "output" | "details";
+type ToolTab = "input" | "output" | "details" | "agent";
-function ToolUseRow({ tool }: { tool: ToolUse }) {
+export function ToolUseRow({ tool }: { tool: ToolUse }) {
const hasInput = tool.inputJson !== "{}";
const hasResult = !!tool.resultOutput;
const hasDetails = !!tool.description || !!tool.parametersJson;
+ const hasSubAgent = !!tool.subAgent;
const availableTabs: ToolTab[] = [
+ ...(hasSubAgent ? (["agent"] as const) : []),
...(hasInput ? (["input"] as const) : []),
...(hasResult ? (["output"] as const) : []),
...(hasDetails ? (["details"] as const) : []),
];
- const defaultTab: ToolTab | null = hasInput ? "input" : null;
- const [activeTab, setActiveTab] = useState(defaultTab);
+ const [activeTab, setActiveTab] = useState(
+ hasSubAgent ? "agent" : hasInput ? "input" : null
+ );
+
+ // Auto-select input tab when input arrives after initial render (e.g. streaming tool calls)
+ useEffect(() => {
+ if (!hasSubAgent && hasInput && activeTab === null) {
+ setActiveTab("input");
+ }
+ }, [hasInput, hasSubAgent]);
function handleTabClick(tab: ToolTab) {
setActiveTab(activeTab === tab ? null : tab);
}
return (
-
+
-
{tool.toolName}
+ {hasSubAgent && (
+
+ )}
+
+ {tool.toolName}
+
+ {hasSubAgent && tool.subAgent?.isStreaming && (
+
+
+ streaming
+
+ )}
{tool.resultSummary && (
{tool.resultSummary}
)}
@@ -288,7 +307,11 @@ function ToolUseRow({ tool }: { tool: ToolUse }) {
{availableTabs.length > 0 && (
<>
-
+
- {children}
-
- ),
- }))
-);
-
type AITab = "overview" | "messages" | "tools" | "prompt";
export function AISpanDetails({
diff --git a/apps/webapp/app/components/runs/v3/ai/types.ts b/apps/webapp/app/components/runs/v3/ai/types.ts
index bb0fd7e74b1..c59c87865d2 100644
--- a/apps/webapp/app/components/runs/v3/ai/types.ts
+++ b/apps/webapp/app/components/runs/v3/ai/types.ts
@@ -22,6 +22,11 @@ export type ToolUse = {
resultSummary?: string;
/** Full formatted result for display in a code block */
resultOutput?: string;
+ /** Sub-agent output — when the tool result is a UIMessage with parts */
+ subAgent?: {
+ parts: any[];
+ isStreaming: boolean;
+ };
};
// ---------------------------------------------------------------------------
diff --git a/apps/webapp/app/hooks/useAutoScrollToBottom.ts b/apps/webapp/app/hooks/useAutoScrollToBottom.ts
new file mode 100644
index 00000000000..b8e59687ed6
--- /dev/null
+++ b/apps/webapp/app/hooks/useAutoScrollToBottom.ts
@@ -0,0 +1,104 @@
+import { useEffect, useLayoutEffect, useRef } from "react";
+
+const AT_BOTTOM_TOLERANCE_PX = 16;
+
+/**
+ * Chat-style sticky-bottom auto-scroll behavior.
+ *
+ * Behavior:
+ * - On mount, finds the closest scrollable ancestor of the returned ref
+ * (the inspector content panel, the playground messages panel, etc.).
+ * - Tracks whether the user is currently "at the bottom" of that scroll
+ * container via a passive scroll listener. Default is `true` so the very
+ * first render of an existing conversation lands at the bottom, and the
+ * "content fits without scrolling" case stays in auto-scroll mode.
+ * - Whenever the dependency array changes (typically the messages array),
+ * if the user was at the bottom, programmatically scrolls to the new
+ * bottom. Uses `useLayoutEffect` so the scroll happens before paint and
+ * there's no one-frame flicker showing new content above the viewport.
+ * - Scrolling away from the bottom flips the ref to `false` → auto-scroll
+ * pauses. Scrolling back into the bottom band (within
+ * `AT_BOTTOM_TOLERANCE_PX`) flips it back to `true` → auto-scroll
+ * resumes.
+ *
+ * The programmatic scroll fires its own scroll event, which immediately
+ * re-runs the stickiness check and confirms we're still at the bottom
+ * (distance ≈ 0 ≤ tolerance), so the ref stays `true`. No special
+ * "ignore programmatic scroll" flag needed.
+ *
+ * @param deps Pass the rendered list (or any dependency that should
+ * trigger a re-scroll). Typically `[messages]`.
+ * @returns A ref to attach to the component's root element. The hook
+ * walks up from this element's parent to locate the scroll
+ * container, so the root must be mounted *inside* the
+ * scrollable region.
+ *
+ * @example
+ * ```tsx
+ * function ChatPanel({ messages }) {
+ * const rootRef = useAutoScrollToBottom([messages]);
+ * return (
+ * ) {
+ const rootRef = useRef(null);
+ const containerRef = useRef(null);
+ // Default true so initial mount + replay land at the bottom, and the
+ // no-overflow case stays sticky once content starts to grow.
+ const stickToBottomRef = useRef(true);
+
+ // Locate the scroll container on mount and attach a passive scroll
+ // listener that updates `stickToBottomRef`.
+ useEffect(() => {
+ const findScrollContainer = (start: HTMLElement | null): HTMLElement | null => {
+ let current: HTMLElement | null = start;
+ while (current) {
+ const style = getComputedStyle(current);
+ const overflowY = style.overflowY;
+ if (overflowY === "auto" || overflowY === "scroll") return current;
+ current = current.parentElement;
+ }
+ return null;
+ };
+
+ const container = findScrollContainer(rootRef.current?.parentElement ?? null);
+ if (!container) return;
+ containerRef.current = container;
+
+ const updateStickiness = () => {
+ const distanceFromBottom =
+ container.scrollHeight - container.scrollTop - container.clientHeight;
+ stickToBottomRef.current = distanceFromBottom <= AT_BOTTOM_TOLERANCE_PX;
+ };
+
+ // Seed from current position so the first messages-effect uses an
+ // accurate value rather than the default `true` if the user happened
+ // to mount the view already scrolled.
+ updateStickiness();
+
+ container.addEventListener("scroll", updateStickiness, { passive: true });
+ return () => {
+ container.removeEventListener("scroll", updateStickiness);
+ containerRef.current = null;
+ };
+ }, []);
+
+ // After each commit that changes the deps (typically the messages
+ // array), if we were at the bottom, scroll to the new bottom.
+ useLayoutEffect(() => {
+ if (!stickToBottomRef.current) return;
+ const container = containerRef.current;
+ if (!container) return;
+ container.scrollTop = container.scrollHeight;
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, deps);
+
+ return rootRef;
+}
diff --git a/apps/webapp/app/presenters/v3/AgentListPresenter.server.ts b/apps/webapp/app/presenters/v3/AgentListPresenter.server.ts
new file mode 100644
index 00000000000..d34f7393884
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/AgentListPresenter.server.ts
@@ -0,0 +1,288 @@
+import {
+ type PrismaClientOrTransaction,
+ type RuntimeEnvironmentType,
+ type TaskTriggerSource,
+} from "@trigger.dev/database";
+import { ClickHouse } from "@internal/clickhouse";
+import { z } from "zod";
+import { $replica } from "~/db.server";
+import { clickhouseClient } from "~/services/clickhouseInstance.server";
+import { singleton } from "~/utils/singleton";
+import { findCurrentWorkerFromEnvironment } from "~/v3/models/workerDeployment.server";
+
+export type AgentListItem = {
+ slug: string;
+ filePath: string;
+ createdAt: Date;
+ triggerSource: TaskTriggerSource;
+ config: unknown;
+};
+
+export type AgentActiveState = {
+ running: number;
+ suspended: number;
+};
+
+export class AgentListPresenter {
+ constructor(
+ private readonly clickhouse: ClickHouse,
+ private readonly _replica: PrismaClientOrTransaction
+ ) {}
+
+ public async call({
+ organizationId,
+ projectId,
+ environmentId,
+ environmentType,
+ }: {
+ organizationId: string;
+ projectId: string;
+ environmentId: string;
+ environmentType: RuntimeEnvironmentType;
+ }) {
+ const currentWorker = await findCurrentWorkerFromEnvironment(
+ {
+ id: environmentId,
+ type: environmentType,
+ },
+ this._replica
+ );
+
+ if (!currentWorker) {
+ return {
+ agents: [],
+ activeStates: Promise.resolve({} as Record),
+ conversationSparklines: Promise.resolve({} as Record),
+ costSparklines: Promise.resolve({} as Record),
+ tokenSparklines: Promise.resolve({} as Record),
+ };
+ }
+
+ const agents = await this._replica.backgroundWorkerTask.findMany({
+ where: {
+ workerId: currentWorker.id,
+ triggerSource: "AGENT",
+ },
+ select: {
+ id: true,
+ slug: true,
+ filePath: true,
+ triggerSource: true,
+ config: true,
+ createdAt: true,
+ },
+ orderBy: {
+ slug: "asc",
+ },
+ });
+
+ const slugs = agents.map((a) => a.slug);
+
+ if (slugs.length === 0) {
+ return {
+ agents,
+ activeStates: Promise.resolve({} as Record),
+ conversationSparklines: Promise.resolve({} as Record),
+ costSparklines: Promise.resolve({} as Record),
+ tokenSparklines: Promise.resolve({} as Record),
+ };
+ }
+
+ // All queries are deferred for streaming
+ const activeStates = this.#getActiveStates(environmentId, slugs);
+ const conversationSparklines = this.#getConversationSparklines(environmentId, slugs);
+ const costSparklines = this.#getCostSparklines(environmentId, slugs);
+ const tokenSparklines = this.#getTokenSparklines(environmentId, slugs);
+
+ return { agents, activeStates, conversationSparklines, costSparklines, tokenSparklines };
+ }
+
+ /** Count runs currently executing vs suspended per agent */
+ async #getActiveStates(
+ environmentId: string,
+ slugs: string[]
+ ): Promise> {
+ const queryFn = this.clickhouse.reader.query({
+ name: "agentActiveStates",
+ query: `SELECT
+ task_identifier,
+ countIf(status = 'EXECUTING') AS running,
+ countIf(status IN ('WAITING_TO_RESUME', 'QUEUED_EXECUTING')) AS suspended
+ FROM trigger_dev.task_runs_v2
+ WHERE environment_id = {environmentId: String}
+ AND task_identifier IN {slugs: Array(String)}
+ AND task_kind = 'AGENT'
+ AND status IN ('EXECUTING', 'WAITING_TO_RESUME', 'QUEUED_EXECUTING')
+ GROUP BY task_identifier`,
+ params: z.object({
+ environmentId: z.string(),
+ slugs: z.array(z.string()),
+ }),
+ schema: z.object({
+ task_identifier: z.string(),
+ running: z.coerce.number(),
+ suspended: z.coerce.number(),
+ }),
+ });
+
+ const [error, rows] = await queryFn({ environmentId, slugs });
+ if (error) {
+ console.error("Agent active states query failed:", error);
+ return {};
+ }
+
+ const result: Record = {};
+ for (const row of rows) {
+ result[row.task_identifier] = { running: row.running, suspended: row.suspended };
+ }
+ return result;
+ }
+
+ /** 24h hourly sparkline of conversation (run) count per agent */
+ async #getConversationSparklines(
+ environmentId: string,
+ slugs: string[]
+ ): Promise> {
+ const queryFn = this.clickhouse.reader.query({
+ name: "agentConversationSparklines",
+ query: `SELECT
+ task_identifier,
+ toStartOfHour(created_at) AS bucket,
+ count() AS val
+ FROM trigger_dev.task_runs_v2
+ WHERE environment_id = {environmentId: String}
+ AND task_identifier IN {slugs: Array(String)}
+ AND task_kind = 'AGENT'
+ AND created_at >= now() - INTERVAL 24 HOUR
+ GROUP BY task_identifier, bucket
+ ORDER BY task_identifier, bucket`,
+ params: z.object({
+ environmentId: z.string(),
+ slugs: z.array(z.string()),
+ }),
+ schema: z.object({
+ task_identifier: z.string(),
+ bucket: z.string(),
+ val: z.coerce.number(),
+ }),
+ });
+
+ return this.#buildSparklineMap(await queryFn({ environmentId, slugs }), slugs);
+ }
+
+ /** 24h hourly sparkline of LLM cost per agent */
+ async #getCostSparklines(
+ environmentId: string,
+ slugs: string[]
+ ): Promise> {
+ const queryFn = this.clickhouse.reader.query({
+ name: "agentCostSparklines",
+ query: `SELECT
+ task_identifier,
+ toStartOfHour(start_time) AS bucket,
+ sum(total_cost) AS val
+ FROM trigger_dev.llm_metrics_v1
+ WHERE environment_id = {environmentId: String}
+ AND task_identifier IN {slugs: Array(String)}
+ AND start_time >= now() - INTERVAL 24 HOUR
+ GROUP BY task_identifier, bucket
+ ORDER BY task_identifier, bucket`,
+ params: z.object({
+ environmentId: z.string(),
+ slugs: z.array(z.string()),
+ }),
+ schema: z.object({
+ task_identifier: z.string(),
+ bucket: z.string(),
+ val: z.coerce.number(),
+ }),
+ });
+
+ return this.#buildSparklineMap(await queryFn({ environmentId, slugs }), slugs);
+ }
+
+ /** 24h hourly sparkline of total tokens per agent */
+ async #getTokenSparklines(
+ environmentId: string,
+ slugs: string[]
+ ): Promise> {
+ const queryFn = this.clickhouse.reader.query({
+ name: "agentTokenSparklines",
+ query: `SELECT
+ task_identifier,
+ toStartOfHour(start_time) AS bucket,
+ sum(total_tokens) AS val
+ FROM trigger_dev.llm_metrics_v1
+ WHERE environment_id = {environmentId: String}
+ AND task_identifier IN {slugs: Array(String)}
+ AND start_time >= now() - INTERVAL 24 HOUR
+ GROUP BY task_identifier, bucket
+ ORDER BY task_identifier, bucket`,
+ params: z.object({
+ environmentId: z.string(),
+ slugs: z.array(z.string()),
+ }),
+ schema: z.object({
+ task_identifier: z.string(),
+ bucket: z.string(),
+ val: z.coerce.number(),
+ }),
+ });
+
+ return this.#buildSparklineMap(await queryFn({ environmentId, slugs }), slugs);
+ }
+
+ /** Convert ClickHouse query result to sparkline map with zero-filled 24 hourly buckets */
+ #buildSparklineMap(
+ queryResult: [Error, null] | [null, { task_identifier: string; bucket: string; val: number }[]],
+ slugs: string[]
+ ): Record {
+ const [error, rows] = queryResult;
+ if (error) {
+ console.error("Agent sparkline query failed:", error);
+ return {};
+ }
+ return this.#buildSparklineFromRows(rows, slugs);
+ }
+
+ #buildSparklineFromRows(
+ rows: { task_identifier: string; bucket: string; val: number }[],
+ slugs: string[]
+ ): Record {
+ const now = new Date();
+ const startHour = new Date(
+ Date.UTC(
+ now.getUTCFullYear(),
+ now.getUTCMonth(),
+ now.getUTCDate(),
+ now.getUTCHours() - 23,
+ 0,
+ 0,
+ 0
+ )
+ );
+
+ const bucketKeys: string[] = [];
+ for (let i = 0; i < 24; i++) {
+ const h = new Date(startHour.getTime() + i * 3600_000);
+ bucketKeys.push(h.toISOString().slice(0, 13).replace("T", " ") + ":00:00");
+ }
+
+ const rowMap = new Map();
+ for (const row of rows) {
+ rowMap.set(`${row.task_identifier}|${row.bucket}`, row.val);
+ }
+
+ const result: Record = {};
+ for (const slug of slugs) {
+ result[slug] = bucketKeys.map((key) => rowMap.get(`${slug}|${key}`) ?? 0);
+ }
+ return result;
+ }
+}
+
+export const agentListPresenter = singleton("agentListPresenter", setupAgentListPresenter);
+
+function setupAgentListPresenter() {
+ return new AgentListPresenter(clickhouseClient, $replica);
+}
diff --git a/apps/webapp/app/presenters/v3/PlaygroundPresenter.server.ts b/apps/webapp/app/presenters/v3/PlaygroundPresenter.server.ts
new file mode 100644
index 00000000000..656bc425cdf
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/PlaygroundPresenter.server.ts
@@ -0,0 +1,147 @@
+import type { RuntimeEnvironmentType, TaskRunStatus, TaskTriggerSource } from "@trigger.dev/database";
+import { $replica } from "~/db.server";
+import { findCurrentWorkerFromEnvironment } from "~/v3/models/workerDeployment.server";
+import { isFinalRunStatus } from "~/v3/taskStatus";
+
+export type PlaygroundAgent = {
+ slug: string;
+ filePath: string;
+ triggerSource: TaskTriggerSource;
+ config: unknown;
+ payloadSchema: unknown;
+};
+
+export type PlaygroundConversation = {
+ id: string;
+ chatId: string;
+ title: string;
+ agentSlug: string;
+ runFriendlyId: string | null;
+ runStatus: TaskRunStatus | null;
+ clientData: unknown;
+ messages: unknown;
+ lastEventId: string | null;
+ isActive: boolean;
+ createdAt: Date;
+ updatedAt: Date;
+};
+
+export class PlaygroundPresenter {
+ async listAgents({
+ environmentId,
+ environmentType,
+ }: {
+ environmentId: string;
+ environmentType: RuntimeEnvironmentType;
+ }): Promise {
+ const currentWorker = await findCurrentWorkerFromEnvironment(
+ { id: environmentId, type: environmentType },
+ $replica
+ );
+
+ if (!currentWorker) return [];
+
+ return $replica.backgroundWorkerTask.findMany({
+ where: {
+ workerId: currentWorker.id,
+ triggerSource: "AGENT",
+ },
+ select: {
+ slug: true,
+ filePath: true,
+ triggerSource: true,
+ config: true,
+ payloadSchema: true,
+ },
+ orderBy: { slug: "asc" },
+ });
+ }
+
+ async getAgent({
+ environmentId,
+ environmentType,
+ agentSlug,
+ }: {
+ environmentId: string;
+ environmentType: RuntimeEnvironmentType;
+ agentSlug: string;
+ }): Promise {
+ const currentWorker = await findCurrentWorkerFromEnvironment(
+ { id: environmentId, type: environmentType },
+ $replica
+ );
+
+ if (!currentWorker) return null;
+
+ return $replica.backgroundWorkerTask.findFirst({
+ where: {
+ workerId: currentWorker.id,
+ triggerSource: "AGENT",
+ slug: agentSlug,
+ },
+ select: {
+ slug: true,
+ filePath: true,
+ triggerSource: true,
+ config: true,
+ payloadSchema: true,
+ },
+ });
+ }
+
+ async getRecentConversations({
+ environmentId,
+ agentSlug,
+ userId,
+ limit = 10,
+ }: {
+ environmentId: string;
+ agentSlug: string;
+ userId: string;
+ limit?: number;
+ }): Promise {
+ const conversations = await $replica.playgroundConversation.findMany({
+ where: {
+ runtimeEnvironmentId: environmentId,
+ agentSlug,
+ userId,
+ },
+ select: {
+ id: true,
+ chatId: true,
+ title: true,
+ agentSlug: true,
+ clientData: true,
+ messages: true,
+ lastEventId: true,
+ createdAt: true,
+ updatedAt: true,
+ run: {
+ select: {
+ friendlyId: true,
+ status: true,
+ },
+ },
+ },
+ orderBy: { updatedAt: "desc" },
+ take: limit,
+ });
+
+ return conversations.map((c) => ({
+ id: c.id,
+ chatId: c.chatId,
+ title: c.title,
+ agentSlug: c.agentSlug,
+ runFriendlyId: c.run?.friendlyId ?? null,
+ runStatus: c.run?.status ?? null,
+ clientData: c.clientData,
+ messages: c.messages,
+ lastEventId: c.lastEventId,
+ isActive: c.run?.status ? !isFinalRunStatus(c.run.status) : false,
+ createdAt: c.createdAt,
+ updatedAt: c.updatedAt,
+ }));
+ }
+}
+
+export const playgroundPresenter = new PlaygroundPresenter();
diff --git a/apps/webapp/app/presenters/v3/SessionPresenter.server.ts b/apps/webapp/app/presenters/v3/SessionPresenter.server.ts
new file mode 100644
index 00000000000..27807971d5a
--- /dev/null
+++ b/apps/webapp/app/presenters/v3/SessionPresenter.server.ts
@@ -0,0 +1,153 @@
+import { type Span } from "@opentelemetry/api";
+import { type PrismaClientOrTransaction } from "@trigger.dev/database";
+import { env } from "~/env.server";
+import { findDisplayableEnvironment } from "~/models/runtimeEnvironment.server";
+import { resolveSessionByIdOrExternalId } from "~/services/realtime/sessions.server";
+import { ServiceValidationError } from "~/v3/services/baseService.server";
+import { startActiveSpan } from "~/v3/tracer.server";
+
+export type SessionDetail = NonNullable>>;
+
+export class SessionPresenter {
+ constructor(private readonly replica: PrismaClientOrTransaction) {}
+
+ public async call(args: {
+ userId: string;
+ environmentId: string;
+ sessionParam: string;
+ }) {
+ return startActiveSpan(
+ "SessionPresenter.call",
+ (span) => this.#call(args, span),
+ {
+ attributes: {
+ environmentId: args.environmentId,
+ sessionParam: args.sessionParam,
+ },
+ }
+ );
+ }
+
+ async #call(
+ {
+ userId,
+ environmentId,
+ sessionParam,
+ }: {
+ userId: string;
+ environmentId: string;
+ sessionParam: string;
+ },
+ rootSpan: Span
+ ) {
+ const session = await startActiveSpan(
+ "SessionPresenter.resolveSession",
+ () => resolveSessionByIdOrExternalId(this.replica, environmentId, sessionParam)
+ );
+ if (!session) {
+ rootSpan.setAttribute("session.found", false);
+ return null;
+ }
+ rootSpan.setAttribute("session.found", true);
+ rootSpan.setAttribute("session.id", session.id);
+
+ const displayableEnvironment = await startActiveSpan(
+ "SessionPresenter.findDisplayableEnvironment",
+ () => findDisplayableEnvironment(environmentId, userId)
+ );
+ if (!displayableEnvironment) {
+ throw new ServiceValidationError("No environment found");
+ }
+
+ // Run history is append-only; latest first matches the runs list.
+ // 50 covers the vast majority of sessions; longer histories link out
+ // to the runs page via tag filter.
+ const sessionRuns = await startActiveSpan(
+ "SessionPresenter.findSessionRuns",
+ async (span) => {
+ const rows = await this.replica.sessionRun.findMany({
+ where: { sessionId: session.id },
+ orderBy: { triggeredAt: "desc" },
+ take: 50,
+ select: {
+ id: true,
+ runId: true,
+ reason: true,
+ triggeredAt: true,
+ },
+ });
+ span.setAttribute("sessionRuns.count", rows.length);
+ return rows;
+ }
+ );
+
+ const runIds = sessionRuns.map((r) => r.runId);
+ const runs = await startActiveSpan(
+ "SessionPresenter.findRuns",
+ async (span) => {
+ span.setAttribute("runIds.count", runIds.length);
+ return runIds.length > 0
+ ? this.replica.taskRun.findMany({
+ where: { id: { in: runIds } },
+ select: { id: true, friendlyId: true, status: true },
+ })
+ : [];
+ }
+ );
+ const runsById = new Map(runs.map((r) => [r.id, r] as const));
+
+ const currentRun = session.currentRunId
+ ? runsById.get(session.currentRunId) ??
+ (await startActiveSpan(
+ "SessionPresenter.findCurrentRunFallback",
+ () =>
+ this.replica.taskRun.findFirst({
+ where: { id: session.currentRunId! },
+ select: { id: true, friendlyId: true, status: true },
+ })
+ ))
+ : null;
+
+ // The dashboard SSE route is cookie-authed, so `publicAccessToken` is
+ // unused — kept here to match the existing `AgentViewAuth` shape.
+ const addressingKey = session.externalId ?? session.friendlyId;
+
+ return {
+ id: session.id,
+ friendlyId: session.friendlyId,
+ externalId: session.externalId,
+ type: session.type,
+ taskIdentifier: session.taskIdentifier,
+ tags: session.tags ? [...session.tags].sort((a, b) => a.localeCompare(b)) : [],
+ metadata: session.metadata,
+ triggerConfig: session.triggerConfig,
+ streamBasinName: session.streamBasinName,
+ closedAt: session.closedAt ? session.closedAt.toISOString() : undefined,
+ closedReason: session.closedReason ?? undefined,
+ expiresAt: session.expiresAt ? session.expiresAt.toISOString() : undefined,
+ createdAt: session.createdAt.toISOString(),
+ updatedAt: session.updatedAt.toISOString(),
+ environment: displayableEnvironment,
+ currentRun: currentRun
+ ? { friendlyId: currentRun.friendlyId, status: currentRun.status }
+ : null,
+ runs: sessionRuns.map((r) => {
+ const run = runsById.get(r.runId);
+ return {
+ id: r.id,
+ reason: r.reason,
+ triggeredAt: r.triggeredAt.toISOString(),
+ run: run
+ ? { friendlyId: run.friendlyId, status: run.status }
+ : null,
+ };
+ }),
+ agentView: {
+ publicAccessToken: "",
+ apiOrigin: env.API_ORIGIN || env.LOGIN_ORIGIN,
+ sessionId: addressingKey,
+ initialMessages: [],
+ },
+ };
+ }
+}
diff --git a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
index de41aee4411..ffa4ea71842 100644
--- a/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
+++ b/apps/webapp/app/presenters/v3/SpanPresenter.server.ts
@@ -1,12 +1,14 @@
import {
type MachinePreset,
prettyPrintPacket,
+ RunAnnotations,
SemanticInternalAttributes,
type TaskRunContext,
TaskRunError,
TriggerTraceContext,
type V3TaskRunContext,
} from "@trigger.dev/core/v3";
+
import { AttemptId, getMaxDuration, parseTraceparent } from "@trigger.dev/core/v3/isomorphic";
import {
extractIdempotencyKeyScope,
@@ -240,6 +242,9 @@ export class SpanPresenter extends BasePresenter {
const externalTraceId = this.#getExternalTraceId(run.traceContext);
+ const taskKind = RunAnnotations.safeParse(run.annotations).data?.taskKind;
+ const isAgentRun = taskKind === "AGENT";
+
let region: { name: string; location: string | null } | null = null;
if (run.runtimeEnvironment.type !== "DEVELOPMENT" && run.engine !== "V1") {
@@ -256,6 +261,48 @@ export class SpanPresenter extends BasePresenter {
region = workerGroup ?? null;
}
+ // Only AGENT-tagged runs (chat.agent and friends) can be session-bound,
+ // so skip the SessionRun lookup for the much larger set of standard runs.
+ // Lookup is by the unique `runId` index, but the cheapest query is the
+ // one we don't run.
+ const sessionRun = isAgentRun
+ ? await this._replica.sessionRun.findFirst({
+ where: { runId: run.id },
+ select: {
+ reason: true,
+ triggeredAt: true,
+ session: {
+ select: {
+ friendlyId: true,
+ externalId: true,
+ type: true,
+ taskIdentifier: true,
+ closedAt: true,
+ expiresAt: true,
+ },
+ },
+ },
+ })
+ : null;
+
+ const session = sessionRun
+ ? {
+ friendlyId: sessionRun.session.friendlyId,
+ externalId: sessionRun.session.externalId,
+ type: sessionRun.session.type,
+ taskIdentifier: sessionRun.session.taskIdentifier,
+ status:
+ sessionRun.session.closedAt != null
+ ? ("CLOSED" as const)
+ : sessionRun.session.expiresAt != null &&
+ sessionRun.session.expiresAt.getTime() < Date.now()
+ ? ("EXPIRED" as const)
+ : ("ACTIVE" as const),
+ reason: sessionRun.reason,
+ triggeredAt: sessionRun.triggeredAt,
+ }
+ : undefined;
+
return {
id: run.id,
friendlyId: run.friendlyId,
@@ -297,6 +344,7 @@ export class SpanPresenter extends BasePresenter {
isFinished,
isRunning: RUNNING_STATUSES.includes(run.status),
isError: isFailedRunStatus(run.status),
+ isAgentRun,
payload,
payloadType: run.payloadType,
output,
@@ -315,6 +363,7 @@ export class SpanPresenter extends BasePresenter {
metadata,
maxDurationInSeconds: getMaxDuration(run.maxDurationInSeconds),
batch: run.batch ? { friendlyId: run.batch.friendlyId } : undefined,
+ session,
engine: run.engine,
region,
workerQueue: run.workerQueue,
@@ -455,6 +504,7 @@ export class SpanPresenter extends BasePresenter {
payloadType: true,
metadata: true,
metadataType: true,
+ annotations: true,
maxAttempts: true,
project: {
include: {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx
new file mode 100644
index 00000000000..deedafd9879
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.agents/route.tsx
@@ -0,0 +1,360 @@
+import { BeakerIcon, CpuChipIcon, MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { type MetaFunction } from "@remix-run/node";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { Suspense } from "react";
+import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
+import { RunsIcon } from "~/assets/icons/RunsIcon";
+import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
+import { Badge } from "~/components/primitives/Badge";
+import { Header2 } from "~/components/primitives/Headers";
+import { Input } from "~/components/primitives/Input";
+import { LinkButton } from "~/components/primitives/Buttons";
+import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
+import { Paragraph } from "~/components/primitives/Paragraph";
+import { Spinner } from "~/components/primitives/Spinner";
+import {
+ Table,
+ TableBlankRow,
+ TableBody,
+ TableCell,
+ TableCellMenu,
+ TableHeader,
+ TableHeaderCell,
+ TableRow,
+} from "~/components/primitives/Table";
+import { SimpleTooltip } from "~/components/primitives/Tooltip";
+import { PopoverMenuItem } from "~/components/primitives/Popover";
+import { TaskFileName } from "~/components/runs/v3/TaskPath";
+import { useFuzzyFilter } from "~/hooks/useFuzzyFilter";
+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 {
+ type AgentListItem,
+ type AgentActiveState,
+ agentListPresenter,
+} from "~/presenters/v3/AgentListPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { EnvironmentParamSchema, v3RunsPath, v3PlaygroundAgentPath } from "~/utils/pathBuilder";
+import { cn } from "~/utils/cn";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Agents | 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(undefined, { status: 404, statusText: "Project not found" });
+ }
+
+ const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+ if (!environment) {
+ throw new Response(undefined, { status: 404, statusText: "Environment not found" });
+ }
+
+ const result = await agentListPresenter.call({
+ organizationId: project.organizationId,
+ projectId: project.id,
+ environmentId: environment.id,
+ environmentType: environment.type,
+ });
+
+ return typeddefer(result);
+};
+
+export default function AgentsPage() {
+ const { agents, activeStates, conversationSparklines, costSparklines, tokenSparklines } =
+ useTypedLoaderData();
+ const organization = useOrganization();
+ const project = useProject();
+ const environment = useEnvironment();
+
+ const { filterText, setFilterText, filteredItems } = useFuzzyFilter({
+ items: agents,
+ keys: ["slug", "filePath"],
+ });
+
+ if (agents.length === 0) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+function formatAgentType(type: string): string {
+ switch (type) {
+ case "ai-sdk-chat":
+ return "AI SDK Chat";
+ default:
+ return type;
+ }
+}
+
+function formatCount(total: number): string {
+ if (total === 0) return "0";
+ if (total >= 1000) return `${(total / 1000).toFixed(1)}k`;
+ return total.toString();
+}
+
+function formatCost(total: number): string {
+ if (total === 0) return "$0";
+ if (total < 0.01) return `$${total.toFixed(4)}`;
+ if (total < 1) return `$${total.toFixed(2)}`;
+ return `$${total.toFixed(2)}`;
+}
+
+function formatTokens(total: number): string {
+ if (total === 0) return "0";
+ if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`;
+ if (total >= 1000) return `${(total / 1000).toFixed(1)}k`;
+ return total.toString();
+}
+
+function SparklinePlaceholder() {
+ return ;
+}
+
+function SparklineWithTotal({
+ data,
+ formatTotal,
+ color = "text-text-bright",
+ barColor = "#3B82F6",
+}: {
+ data?: number[];
+ formatTotal: (total: number) => string;
+ color?: string;
+ barColor?: string;
+}) {
+ if (!data || data.every((v) => v === 0)) {
+ return –;
+ }
+
+ const total = data.reduce((sum, v) => sum + v, 0);
+ const max = Math.max(...data);
+
+ return (
+
{availableTabs.map((tab) => (
);
}
+
+function SubAgentContent({ parts }: { parts: any[] }) {
+ // Extract sub-agent run ID from injected metadata part
+ const runPart = parts.find(
+ (p: any) => p.type === "data-subagent-run" && p.data?.runId
+ );
+ const subAgentRunId = runPart?.data?.runId as string | undefined;
+
+ return (
+
+ {subAgentRunId && (
+
+ );
+}
diff --git a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
index 5e8bb65688f..c243a1e4d9b 100644
--- a/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
+++ b/apps/webapp/app/components/runs/v3/ai/AISpanDetails.tsx
@@ -1,6 +1,7 @@
import { CheckIcon, ClipboardDocumentIcon } from "@heroicons/react/20/solid";
-import { lazy, Suspense, useState } from "react";
+import { Suspense, useState } from "react";
import { Button } from "~/components/primitives/Buttons";
+import { StreamdownRenderer } from "~/components/code/StreamdownRenderer";
import { Header3 } from "~/components/primitives/Headers";
import { Paragraph } from "~/components/primitives/Paragraph";
import { TabButton, TabContainer } from "~/components/primitives/Tabs";
@@ -20,16 +21,6 @@ import type { AISpanData, DisplayItem } from "./types";
import type { PromptSpanData } from "~/presenters/v3/SpanPresenter.server";
import { SpanHorizontalTimeline } from "~/components/runs/v3/SpanHorizontalTimeline";
-const StreamdownRenderer = lazy(() =>
- import("streamdown").then((mod) => ({
- default: ({ children }: { children: string }) => (
-
+
+ View sub-agent run
+
+
+ )}
+ {parts.map((part: any, j: number) => {
+ const partType = part.type as string;
+
+ // Skip the injected metadata part — already rendered above
+ if (partType === "data-subagent-run") return null;
+
+ if (partType === "text" && part.text) {
+ return
+
+ step
+
+
+ );
+ }
+
+ if (partType.startsWith("tool-")) {
+ const subToolName = partType.slice(5);
+ return (
+
+
+ );
+ }
+
+ return null;
+ })}
+
+ {part.text}
+
+
+ *
+ * );
+ * }
+ * ```
+ */
+export function useAutoScrollToBottom(deps: ReadonlyArray
+ * {messages.map((m) =>
+ *
+ No agents deployed
+
+ Create a chat agent using
+
+ chat.agent() from{" "}
+ @trigger.dev/sdk/ai and deploy it to see it here.
+
+
+
+
+
+
+
+
+
+ setFilterText(e.target.value)}
+ autoFocus
+ />
+
+
+ ();
+ // Key on agent slug + conversation chatId so React remounts all stateful
+ // children when switching agents or navigating between conversations.
+ // Without the agent slug, switching agents keeps key="new" and React
+ // reuses the component — useState initializers don't re-run.
+ const conversationKey = `${agent.slug}:${activeConversation?.chatId ?? "new"}`;
+ return ();
+ const parentData = useRouteLoaderData(PARENT_ROUTE_ID) as
+ | {
+ agents: Array<{ slug: string }>;
+ versions: string[];
+ regions: Array<{
+ id: string;
+ name: string;
+ description?: string;
+ isDefault: boolean;
+ }>;
+ isDev: boolean;
+ }
+ | undefined;
+ const agents = parentData?.agents ?? [];
+ const versions = parentData?.versions ?? [];
+ const regions = parentData?.regions ?? [];
+ const isDev = parentData?.isDev ?? false;
+ const defaultRegion = regions.find((r) => r.isDefault);
+ const navigate = useNavigate();
+ const organization = useOrganization();
+ const project = useProject();
+ const environment = useEnvironment();
+
+ const [conversationId, setConversationId] = useState(() =>
+ activeConversation
+ ? recentConversations.find((c) => c.chatId === activeConversation.chatId)?.id ?? null
+ : null
+ );
+ const [chatId, setChatId] = useState(() => activeConversation?.chatId ?? crypto.randomUUID());
+ const [clientDataJson, setClientDataJson] = useState(() =>
+ activeConversation?.clientData ? JSON.stringify(activeConversation.clientData, null, 2) : "{}"
+ );
+ const clientDataJsonRef = useRef(clientDataJson);
+ clientDataJsonRef.current = clientDataJson;
+ const [machine, setMachine] = useState(undefined);
+ const [tags, setTags] = useState([]);
+ const [maxAttempts, setMaxAttempts] = useState(undefined);
+ const [maxDuration, setMaxDuration] = useState(undefined);
+ const [version, setVersion] = useState(undefined);
+ const [region, setRegion] = useState(() =>
+ isDev ? undefined : defaultRegion?.name
+ );
+
+ const actionPath = `/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/playground/action`;
+
+ // Server-side `start` via Remix action — atomically creates the
+ // backing Session for `chatId` and triggers the first run, returns
+ // the session-scoped PAT. Idempotent: called on initial use AND on
+ // 401, so the same code path serves both first-run and PAT renewal.
+ const startSession = useCallback(
+ async (): Promise => {
+ const formData = new FormData();
+ formData.set("intent", "start");
+ formData.set("agentSlug", agent.slug);
+ formData.set("chatId", chatId);
+ formData.set("clientData", clientDataJsonRef.current);
+ if (tags.length > 0) formData.set("tags", tags.join(","));
+ if (machine) formData.set("machine", machine);
+ if (maxAttempts) formData.set("maxAttempts", String(maxAttempts));
+ if (maxDuration) formData.set("maxDuration", String(maxDuration));
+ if (version) formData.set("version", version);
+ if (region) formData.set("region", region);
+
+ const response = await fetch(actionPath, { method: "POST", body: formData });
+ const data = (await response.json()) as {
+ runId?: string;
+ publicAccessToken?: string;
+ conversationId?: string;
+ error?: string;
+ };
+
+ if (!response.ok || !data.publicAccessToken) {
+ throw new Error(data.error ?? "Failed to start chat session");
+ }
+
+ if (data.conversationId) {
+ setConversationId(data.conversationId);
+ }
+
+ return data.publicAccessToken;
+ },
+ [actionPath, agent.slug, chatId, tags, machine, maxAttempts, maxDuration, version, region]
+ );
+
+ // Resource route prefix — all realtime traffic goes through session-authed routes
+ const playgroundBaseURL = `${apiOrigin}/resources/orgs/${organization.slug}/projects/${project.slug}/env/${environment.slug}/playground`;
+
+ // The transport is constructed once (guarded ref below); reading
+ // `startSession` directly there would freeze its closure to the
+ // first render's sidebar values, so subsequent edits to tags /
+ // machine / maxAttempts / maxDuration / version / region would be
+ // silently ignored on the first send. Mirror the `clientDataJsonRef`
+ // pattern so the transport always calls the latest `startSession`.
+ const startSessionRef = useRef(startSession);
+ startSessionRef.current = startSession;
+
+ // Create TriggerChatTransport directly (not via useTriggerChatTransport hook
+ // to avoid React version mismatch between SDK and webapp)
+ const transportRef = useRef(null);
+ if (transportRef.current === null) {
+ transportRef.current = new TriggerChatTransport({
+ task: agent.slug,
+ // The Remix action is idempotent on `(env, externalId)` and
+ // returns a fresh session PAT every time, so it serves both
+ // first-run create and PAT renewal. `startSession` runs on
+ // `transport.preload(chatId)` and lazily on the first
+ // `sendMessage`; `accessToken` runs on a 401/403 from any
+ // session-PAT-authed request. Wiring the same call to both
+ // keeps the Preload button working without a separate refresh
+ // route.
+ startSession: async () => ({ publicAccessToken: await startSessionRef.current() }),
+ accessToken: () => startSessionRef.current(),
+ baseURL: playgroundBaseURL,
+ clientData: JSON.parse(clientDataJson || "{}") as Record,
+ ...(activeConversation?.publicAccessToken
+ ? {
+ sessions: {
+ [activeConversation.chatId]: {
+ publicAccessToken: activeConversation.publicAccessToken,
+ lastEventId: activeConversation.lastEventId ?? undefined,
+ },
+ },
+ }
+ : {}),
+ });
+ }
+ const transport = transportRef.current;
+
+ // Keep the transport's `defaultMetadata` in sync with the JSON editor.
+ // Without this the transport uses the value captured at construction for
+ // every per-turn metadata merge, even after the user edits the JSON.
+ // `startSession` reads from `clientDataJsonRef.current` directly so session
+ // creation is unaffected — this only fixes the per-turn metadata path.
+ useEffect(() => {
+ transport.setClientData(JSON.parse(clientDataJson || "{}") as Record);
+ }, [clientDataJson, transport]);
+
+ // Initial messages from persisted conversation (for resume)
+ const initialMessages = activeConversation?.messages
+ ? (activeConversation.messages as UIMessage[])
+ : [];
+
+ // Track the initial message count so we only save after genuinely new turns
+ // (not during resume replay which re-fires onFinish for replayed turns)
+ const initialMessageCountRef = useRef(initialMessages?.length ?? 0);
+
+ // Save messages after each turn completes
+ const saveMessages = useCallback(
+ (allMessages: UIMessage[]) => {
+ // Skip saves during resume replay — only save when we have more messages than we started with
+ if (allMessages.length <= initialMessageCountRef.current) return;
+
+ const currentSession = transport.getSession(chatId);
+ const lastEventId = currentSession?.lastEventId;
+
+ const formData = new FormData();
+ formData.set("intent", "save");
+ formData.set("agentSlug", agent.slug);
+ formData.set("chatId", chatId);
+ formData.set("messages", JSON.stringify(allMessages));
+ if (lastEventId) formData.set("lastEventId", lastEventId);
+
+ // Fire and forget
+ fetch(actionPath, { method: "POST", body: formData }).catch(() => {});
+
+ // Update the baseline so subsequent saves work correctly
+ initialMessageCountRef.current = allMessages.length;
+ },
+ [chatId, agent.slug, actionPath, transport]
+ );
+
+ // useChat from AI SDK — handles message accumulation, streaming, stop
+ const { messages, sendMessage, stop, status, error } = useChat({
+ id: chatId,
+ messages: initialMessages,
+ transport,
+ onFinish: ({ messages: allMessages }) => {
+ saveMessages(allMessages);
+ },
+ });
+
+ const isStreaming = status === "streaming";
+ const isSubmitted = status === "submitted";
+
+ // Sticky-bottom auto-scroll for the messages list. The hook walks up to
+ // the surrounding `overflow-y-auto` panel and follows the conversation
+ // as new chunks stream in — pauses if you scroll up to read history,
+ // resumes when you scroll back into the bottom band. Same behavior as
+ // the run-inspector Agent tab.
+ const messagesRootRef = useAutoScrollToBottom([messages, isSubmitted]);
+
+ // Pending messages — steering during streaming
+ const pending = usePlaygroundPendingMessages({
+ transport,
+ chatId,
+ status,
+ messages,
+ sendMessage,
+ metadata: safeParseJson(clientDataJson),
+ });
+
+ const [input, setInput] = useState("");
+ const [preloading, setPreloading] = useState(false);
+ const [preloaded, setPreloaded] = useState(false);
+ const inputRef = useRef(null);
+
+ const session = transport.getSession(chatId);
+
+ const handlePreload = useCallback(async () => {
+ setPreloading(true);
+ try {
+ await transport.preload(chatId);
+ setPreloaded(true);
+ inputRef.current?.focus();
+ } finally {
+ setPreloading(false);
+ }
+ }, [transport, chatId]);
+
+ const handleNewConversation = useCallback(() => {
+ // Navigate without ?conversation= so the loader returns activeConversation=null
+ // and the key changes to "new", causing a full remount with fresh state.
+ navigate(window.location.pathname);
+ }, [navigate]);
+
+ const handleDeleteConversation = useCallback(async () => {
+ if (!conversationId) return;
+
+ const formData = new FormData();
+ formData.set("intent", "delete");
+ formData.set("agentSlug", agent.slug);
+ formData.set("deleteConversationId", conversationId);
+
+ await fetch(actionPath, { method: "POST", body: formData });
+ handleNewConversation();
+ }, [conversationId, agent.slug, actionPath, handleNewConversation]);
+
+ const handleSend = useCallback(() => {
+ const trimmed = input.trim();
+ if (!trimmed) return;
+
+ setInput("");
+ // steer() handles both cases: sends via input stream during streaming,
+ // or sends as a normal message when ready
+ pending.steer(trimmed);
+ }, [input, pending]);
+
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ handleSend();
+ }
+ },
+ [handleSend]
+ );
+
+ return (
+
+
+
+ {data.map((value, i) => {
+ const height = max > 0 ? Math.max((value / max) * 100, value > 0 ? 8 : 0) : 0;
+ return (
+
+ );
+}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx
new file mode 100644
index 00000000000..2a7664e0cbc
--- /dev/null
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.playground.$agentParam/route.tsx
@@ -0,0 +1,1227 @@
+import {
+ ArrowUpIcon,
+ BoltIcon,
+ CpuChipIcon,
+ StopIcon,
+ ArrowPathIcon,
+ TrashIcon,
+} from "@heroicons/react/20/solid";
+import { type MetaFunction } from "@remix-run/node";
+import { Link, useFetcher, useNavigate, useRouteLoaderData } from "@remix-run/react";
+import { typedjson, useTypedLoaderData } from "remix-typedjson";
+import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useChat } from "@ai-sdk/react";
+import { TriggerChatTransport } from "@trigger.dev/sdk/chat";
+import { MainCenteredContainer } from "~/components/layout/AppLayout";
+import { Badge } from "~/components/primitives/Badge";
+import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { CopyButton } from "~/components/primitives/CopyButton";
+import { DurationPicker } from "~/components/primitives/DurationPicker";
+import { Header3 } from "~/components/primitives/Headers";
+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 { Paragraph } from "~/components/primitives/Paragraph";
+import { Spinner } from "~/components/primitives/Spinner";
+import { Popover, PopoverContent, PopoverTrigger } from "~/components/primitives/Popover";
+import { ClockRotateLeftIcon } from "~/assets/icons/ClockRotateLeftIcon";
+import type { PlaygroundConversation } from "~/presenters/v3/PlaygroundPresenter.server";
+import { DateTime } from "~/components/primitives/DateTime";
+import { cn } from "~/utils/cn";
+import { JSONEditor } from "~/components/code/JSONEditor";
+import { ToolUseRow, AssistantResponse, ChatBubble } from "~/components/runs/v3/ai/AIChatMessages";
+import { MessageBubble } from "~/components/runs/v3/agent/AgentMessageView";
+import { useAutoScrollToBottom } from "~/hooks/useAutoScrollToBottom";
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "~/components/primitives/Resizable";
+import {
+ ClientTabs,
+ ClientTabsContent,
+ ClientTabsList,
+ ClientTabsTrigger,
+} from "~/components/primitives/ClientTabs";
+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 { playgroundPresenter } from "~/presenters/v3/PlaygroundPresenter.server";
+import { requireUserId } from "~/services/session.server";
+import { RunTagInput } from "~/components/runs/v3/RunTagInput";
+import { Select, SelectItem } from "~/components/primitives/Select";
+import { EnvironmentParamSchema, v3PlaygroundAgentPath } from "~/utils/pathBuilder";
+import { env as serverEnv } from "~/env.server";
+import { generateJWT as internal_generateJWT, MachinePresetName } from "@trigger.dev/core/v3";
+import { extractJwtSigningSecretKey } from "~/services/realtime/jwtAuth.server";
+import { SchemaTabContent } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/SchemaTabContent";
+import { AIPayloadTabContent } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.test.tasks.$taskParam/AIPayloadTabContent";
+import type { UIMessage } from "@ai-sdk/react";
+
+export const meta: MetaFunction = () => {
+ return [{ title: "Playground | Trigger.dev" }];
+};
+
+export const loader = async ({ request, params }: LoaderFunctionArgs) => {
+ const userId = await requireUserId(request);
+ const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
+ const agentSlug = params.agentParam;
+
+ if (!agentSlug) {
+ throw new Response(undefined, { status: 404, statusText: "Agent not specified" });
+ }
+
+ const project = await findProjectBySlug(organizationSlug, projectParam, userId);
+ if (!project) {
+ throw new Response(undefined, { status: 404, statusText: "Project not found" });
+ }
+
+ const environment = await findEnvironmentBySlug(project.id, envParam, userId);
+ if (!environment) {
+ throw new Response(undefined, { status: 404, statusText: "Environment not found" });
+ }
+
+ const agent = await playgroundPresenter.getAgent({
+ environmentId: environment.id,
+ environmentType: environment.type,
+ agentSlug,
+ });
+
+ if (!agent) {
+ throw new Response(undefined, { status: 404, statusText: "Agent not found" });
+ }
+
+ const agentConfig = agent.config as { type?: string } | null;
+ const apiOrigin = serverEnv.API_ORIGIN || serverEnv.LOGIN_ORIGIN || "http://localhost:3030";
+
+ const recentConversations = await playgroundPresenter.getRecentConversations({
+ environmentId: environment.id,
+ agentSlug,
+ userId,
+ });
+
+ // Check for ?conversation= param to resume an existing conversation
+ const url = new URL(request.url);
+ const conversationId = url.searchParams.get("conversation");
+
+ let activeConversation: {
+ chatId: string;
+ runFriendlyId: string | null;
+ publicAccessToken: string | null;
+ clientData: unknown;
+ messages: unknown;
+ lastEventId: string | null;
+ } | null = null;
+
+ if (conversationId) {
+ const conv = recentConversations.find((c) => c.id === conversationId);
+ if (conv) {
+ let jwt: string | null = null;
+ if (conv.isActive && conv.runFriendlyId) {
+ jwt = await internal_generateJWT({
+ secretKey: extractJwtSigningSecretKey(environment),
+ payload: {
+ sub: environment.id,
+ pub: true,
+ scopes: [`read:runs:${conv.runFriendlyId}`, `write:inputStreams:${conv.runFriendlyId}`],
+ },
+ expirationTime: "1h",
+ });
+ }
+
+ activeConversation = {
+ chatId: conv.chatId,
+ runFriendlyId: conv.runFriendlyId,
+ publicAccessToken: jwt,
+ clientData: conv.clientData,
+ messages: conv.messages,
+ lastEventId: conv.lastEventId,
+ };
+ }
+ }
+
+ return typedjson({
+ agent: {
+ slug: agent.slug,
+ filePath: agent.filePath,
+ type: agentConfig?.type ?? "unknown",
+ clientDataSchema: agent.payloadSchema ?? null,
+ },
+ apiOrigin,
+ recentConversations,
+ activeConversation,
+ });
+};
+
+export default function PlaygroundAgentPage() {
+ const { agent, activeConversation } = useTypedLoaderData 0 ? barColor : "transparent",
+ opacity: value > 0 ? 0.8 : 0,
+ }}
+ />
+ );
+ })}
+
+ {formatTotal(total)}
+
+ {/* Header */}
+
+
+
+ {/* Messages */}
+
+
+ {formatAgentType(agent.type)}
+
+
+ {activeConversation?.runFriendlyId && (
+
+ View run
+
+ )}
+ {messages.length > 0 && (
+
+ Copy raw
+
+ )}
+
+
+ {messages.length === 0 ? (
+
+
+ ) : (
+
+
+ {/* Error */}
+ {error && (
+
+ {preloaded ? (
+ <>
+ Preloaded
+
+ Agent is warmed up and waiting. Type a message below to start.
+
+
+ ) : (
+ <>
+ Start a conversation
+
+ Type a message below to start testing{" "}
+
+ {!session && (
+
+ )}
+
+ )}
+
+ {agent.slug}
+
+ {messages.map((msg) => (
+
+ )}
+
+
+ )}
+
+
+
+ {error.message}
+
+ )}
+
+ {/* Input */}
+
+
+