+
+ );
+ }
+
+ 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…
+
+
+
+ *
+ * );
+ * }
+ * ```
+ */
+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 */}
+
+
+