fix(webapp): cap the size of a message to the agent

Author: kathiekiwi

.server-changes/dashboard-agent.md

@@ -9,6 +9,6 @@ Meet the dashboard agent: a chat in every environment that answers questions abo
 
 **Watch…** on a run, queue, error or the health report tells you when things change: a run finishes, a queue clears or grows past a number you pick, an error comes back, an environment recovers. The answer arrives in the chat and, if you want, by email, Slack or webhook — and the agent can look into bad news on its own.
 
-The health report reads the same everywhere — dashboard, terminal, editor: same sections, same wording, and a marker instead of colour where colour isn't available. Its "stale data" mark is amber rather than blue, and its metric rows stay inside the panel when the chat is narrow. If a message to the agent fails, the chat says so and keeps saying so when you reopen it. Unsubscribing from watch notifications takes effect immediately, and you can watch a run the moment you trigger it.
+The health report reads the same everywhere — dashboard, terminal, editor: same sections, same wording, and a marker instead of colour where colour isn't available. Its "stale data" mark is amber rather than blue, and its metric rows stay inside the panel when the chat is narrow. If a message to the agent fails, the chat says so and keeps saying so when you reopen it. A watch that has something to tell you reaches you on any browser you sign in from, without opening the chat first. Messages to the agent now have a length limit, with a counter as you approach it. Unsubscribing from watch notifications takes effect immediately, and you can watch a run the moment you trigger it.
 
 Separately: a queue's wait times, peak depth, throughput and throttling can now be read from the API, and the Docs button has been removed from page headers.

apps/webapp/app/components/dashboard-agent/DashboardAgentChat.tsx

@@ -11,6 +11,7 @@ import { DashboardAgentComposer } from "./DashboardAgentComposer";
 import { DashboardAgentContextBanner } from "./DashboardAgentContextBanner";
 import { DashboardAgentHero } from "./DashboardAgentHero";
 import { DashboardAgentMessages, type TurnActivity } from "./DashboardAgentMessages";
+import { MESSAGE_TOO_LARGE_ERROR } from "./message-limits";
 import { createTranscriptOrder, orderTranscript } from "./message-order";
 import { appendRunFilters } from "./navigate-target";
 import { pendingNavigateIntents, pendingWatchIntents } from "./pending-intents";
@@ -101,10 +102,19 @@ export function DashboardAgentChat({
     baseURL: apiOrigin,
     // Only `in` goes through the same-origin proxy, which injects the delegated user
     // token server-side. `baseURL` stays a string so `out` keeps the SDK's realtime routing.
-    fetch: (url, init, ctx) => {
+    fetch: async (url, init, ctx) => {
       if (ctx.endpoint !== "in") return globalThis.fetch(url, init);
       const { pathname, search } = new URL(url);
-      return globalThis.fetch(`${actionPath}/in${pathname}${search}`, init);
+      const res = await globalThis.fetch(`${actionPath}/in${pathname}${search}`, init);
+      // A refused message never succeeds on a retry, so it surfaces as the turn's error.
+      if (res.status === 413) {
+        const data = (await res
+          .clone()
+          .json()
+          .catch(() => null)) as { error?: string } | null;
+        throw new Error(data?.error ?? MESSAGE_TOO_LARGE_ERROR);
+      }
+      return res;
     },
     clientData,
     sessions: session

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -2,6 +2,7 @@ import { ArrowUpIcon, StopIcon } from "@heroicons/react/20/solid";
 import { useEffect, useRef } from "react";
 import { Button } from "~/components/primitives/Buttons";
 import { cn } from "~/utils/cn";
+import { MAX_MESSAGE_CHARS, MESSAGE_CHARS_WARN_AT } from "./message-limits";
 
 export type DashboardAgentComposerLayout = "docked" | "hero";
 
@@ -82,7 +83,9 @@ export function DashboardAgentComposer({
             ref={ref}
             rows={isHero ? 3 : 1}
             value={value}
-            onChange={(e) => onChange(e.target.value)}
+            // Clamped as well as `maxLength`, so a programmatic paste can't exceed the cap.
+            maxLength={MAX_MESSAGE_CHARS}
+            onChange={(e) => onChange(e.target.value.slice(0, MAX_MESSAGE_CHARS))}
             onKeyDown={(e) => {
               if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
                 e.preventDefault();
@@ -115,6 +118,18 @@ export function DashboardAgentComposer({
           )}
         </div>
       </div>
+      {/* Only near the limit: a normal message never sees a counter. */}
+      {value.length >= MESSAGE_CHARS_WARN_AT ? (
+        <p
+          className={cn(
+            "self-end text-xxs tabular-nums",
+            value.length >= MAX_MESSAGE_CHARS ? "text-error" : "text-text-dimmed"
+          )}
+          aria-live="polite"
+        >
+          {value.length} / {MAX_MESSAGE_CHARS}
+        </p>
+      ) : null}
     </div>
   );
 }

apps/webapp/app/components/dashboard-agent/message-limits.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import {
+  checkMessageParts,
+  declaredBodyBytes,
+  exceedsMessageBodyBytes,
+  MAX_MESSAGE_BODY_BYTES,
+  MAX_MESSAGE_CHARS,
+  MAX_MESSAGE_PARTS,
+} from "./message-limits";
+
+describe("message limits", () => {
+  it("lets a long real question through", () => {
+    const text = "why did this fail?\n".repeat(50);
+
+    expect(exceedsMessageBodyBytes(Buffer.byteLength(text, "utf8"))).toBe(false);
+    expect(checkMessageParts([{ type: "text", text }])).toBeNull();
+  });
+
+  it("refuses a pasted dump by bytes", () => {
+    expect(exceedsMessageBodyBytes(MAX_MESSAGE_BODY_BYTES)).toBe(false);
+    expect(exceedsMessageBodyBytes(MAX_MESSAGE_BODY_BYTES + 1)).toBe(true);
+  });
+
+  it("counts multi-byte characters as bytes, not characters", () => {
+    // Under the char cap, over the byte cap: 4 bytes each.
+    const emoji = "🙂".repeat(MAX_MESSAGE_BODY_BYTES / 4 + 1);
+
+    expect(emoji.length).toBeLessThan(MAX_MESSAGE_BODY_BYTES);
+    expect(exceedsMessageBodyBytes(Buffer.byteLength(emoji, "utf8"))).toBe(true);
+  });
+
+  it("refuses a dump split across parts", () => {
+    const parts = Array.from({ length: 4 }, () => ({
+      type: "text",
+      text: "x".repeat(MAX_MESSAGE_CHARS / 2),
+    }));
+
+    expect(checkMessageParts(parts)).toBe("too_long");
+  });
+
+  it("refuses too many parts", () => {
+    const parts = Array.from({ length: MAX_MESSAGE_PARTS + 1 }, () => ({
+      type: "text",
+      text: "x",
+    }));
+
+    expect(checkMessageParts(parts)).toBe("too_many_parts");
+    expect(checkMessageParts(parts.slice(0, MAX_MESSAGE_PARTS))).toBeNull();
+  });
+
+  it("leaves a shape that isn't a parts array to the schema", () => {
+    expect(checkMessageParts(undefined)).toBeNull();
+    expect(checkMessageParts("nope")).toBeNull();
+  });
+
+  it("reads the declared size, or nothing when it isn't declared", () => {
+    expect(declaredBodyBytes(new Headers({ "content-length": "1234" }))).toBe(1234);
+    expect(declaredBodyBytes(new Headers())).toBeNull();
+    expect(declaredBodyBytes(new Headers({ "content-length": "nope" }))).toBeNull();
+    // An undeclared size can't be refused here; the body's own length is.
+    expect(exceedsMessageBodyBytes(null)).toBe(false);
+  });
+});

apps/webapp/app/components/dashboard-agent/message-limits.ts

@@ -0,0 +1,51 @@
+/**
+ * Caps on one message to the agent, shared by the composer and the two server paths a message
+ * can arrive through. Generous for a real question with a pasted stack trace, stingy for a dump:
+ * an unbounded paste is a large model bill and a permanently fat transcript.
+ */
+
+/** ~2 pages of text, or a long stack trace. */
+export const MAX_MESSAGE_CHARS = 8_000;
+
+/** The counter only shows near the limit, so a normal message never sees it. */
+export const MESSAGE_CHARS_WARN_AT = Math.floor(MAX_MESSAGE_CHARS * 0.9);
+
+/** A composed message is a handful of parts; dozens means something is wrong. */
+export const MAX_MESSAGE_PARTS = 20;
+
+/**
+ * The whole request body, in bytes: headroom for {@link MAX_MESSAGE_CHARS} of any script plus
+ * the per-turn metadata, and nothing like a pasted file.
+ */
+export const MAX_MESSAGE_BODY_BYTES = 64 * 1024;
+
+export const MESSAGE_TOO_LARGE_CODE = "message_too_large";
+
+export const MESSAGE_TOO_LARGE_ERROR = "That message is too long. Shorten it and send again.";
+
+export type MessagePartsProblem = "too_many_parts" | "too_long";
+
+/** Counts the parts and their text. Anything that isn't a parts array is left to the schema. */
+export function checkMessageParts(parts: unknown): MessagePartsProblem | null {
+  if (!Array.isArray(parts)) return null;
+  if (parts.length > MAX_MESSAGE_PARTS) return "too_many_parts";
+
+  let chars = 0;
+  for (const part of parts) {
+    const text = (part as { text?: unknown } | null)?.text;
+    if (typeof text === "string") chars += text.length;
+  }
+  return chars > MAX_MESSAGE_CHARS ? "too_long" : null;
+}
+
+/** The declared body size, or null when the client didn't declare one. */
+export function declaredBodyBytes(headers: Headers): number | null {
+  const raw = headers.get("content-length");
+  if (!raw) return null;
+  const bytes = Number.parseInt(raw, 10);
+  return Number.isFinite(bytes) ? bytes : null;
+}
+
+export function exceedsMessageBodyBytes(bytes: number | null | undefined): boolean {
+  return typeof bytes === "number" && bytes > MAX_MESSAGE_BODY_BYTES;
+}

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboard-agent.in.$.ts

@@ -1,4 +1,11 @@
 import { type ActionFunctionArgs, json } from "@remix-run/server-runtime";
+import {
+  checkMessageParts,
+  declaredBodyBytes,
+  exceedsMessageBodyBytes,
+  MESSAGE_TOO_LARGE_CODE,
+  MESSAGE_TOO_LARGE_ERROR,
+} from "~/components/dashboard-agent/message-limits";
 import { $replica } from "~/db.server";
 import { findProjectBySlug } from "~/models/project.server";
 import {
@@ -23,6 +30,10 @@ const FORWARDED_HEADERS = [
   "x-trigger-branch",
 ];
 
+function tooLarge() {
+  return json({ error: MESSAGE_TOO_LARGE_ERROR, code: MESSAGE_TOO_LARGE_CODE }, { status: 413 });
+}
+
 export async function action({ request, params }: ActionFunctionArgs) {
   const user = await requireUser(request);
   const { organizationSlug, projectParam, envParam } = EnvironmentParamSchema.parse(params);
@@ -38,6 +49,11 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ error: "Not found" }, { status: 404 });
   }
 
+  // Refused before any lookup, so an oversized body costs nothing.
+  if (exceedsMessageBodyBytes(declaredBodyBytes(request.headers))) {
+    return tooLarge();
+  }
+
   const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
   if (!project) return json({ error: "Project not found" }, { status: 404 });
 
@@ -61,18 +77,31 @@ export async function action({ request, params }: ActionFunctionArgs) {
   const repoSnapshot = await resolveDashboardAgentRepoSnapshot(project.id);
 
   const raw = await request.text();
+  // The header is advisory; the body it actually sent is what counts.
+  if (exceedsMessageBodyBytes(Buffer.byteLength(raw, "utf8"))) {
+    return tooLarge();
+  }
+
   let body = raw;
   try {
     const parsed = JSON.parse(raw) as {
       kind?: string;
-      payload?: { trigger?: string; metadata?: Record<string, unknown> };
+      payload?: {
+        trigger?: string;
+        metadata?: Record<string, unknown>;
+        message?: { parts?: unknown };
+      };
     };
     // Actions are placed by the server only, and this proxy is the one path a browser
     // can reach `.in` through.
     if (parsed.payload?.trigger === "action") {
       return json({ error: "Not allowed" }, { status: 403 });
     }
     if (parsed.kind === "message" && parsed.payload) {
+      // A body under the byte cap can still be one huge part or hundreds of small ones.
+      if (checkMessageParts(parsed.payload.message?.parts) !== null) {
+        return tooLarge();
+      }
       parsed.payload.metadata = {
         ...(parsed.payload.metadata ?? {}),
         userActorToken: await mintDashboardAgentUserActorToken(user.id, {

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.dashboard-agent.ts

@@ -25,6 +25,13 @@ import {
 import { generateFriendlyId } from "@trigger.dev/core/v3/isomorphic";
 import type { UIMessage } from "ai";
 import { z } from "zod";
+import {
+  checkMessageParts,
+  declaredBodyBytes,
+  exceedsMessageBodyBytes,
+  MESSAGE_TOO_LARGE_CODE,
+  MESSAGE_TOO_LARGE_ERROR,
+} from "~/components/dashboard-agent/message-limits";
 import { $replica } from "~/db.server";
 import { env } from "~/env.server";
 import { findProjectBySlug } from "~/models/project.server";
@@ -200,6 +207,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   });
 };
 
+function messageTooLarge() {
+  return json({ error: MESSAGE_TOO_LARGE_ERROR, code: MESSAGE_TOO_LARGE_CODE }, { status: 413 });
+}
+
 export const action = async ({ request, params }: ActionFunctionArgs) => {
   const user = await requireUser(request);
   const userId = user.id;
@@ -216,6 +227,11 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     return json({ error: "Not found" }, { status: 404 });
   }
 
+  // Refused before any lookup, so an oversized body costs nothing.
+  if (exceedsMessageBodyBytes(declaredBodyBytes(request.headers))) {
+    return messageTooLarge();
+  }
+
   const project = await findProjectBySlug(organizationSlug, projectParam, userId);
   if (!project) return json({ error: "Project not found" }, { status: 404 });
 
@@ -238,6 +254,14 @@ export const action = async ({ request, params }: ActionFunctionArgs) => {
     }
     if (!firstMessage) return json({ error: "message is required" }, { status: 400 });
 
+    // A body under the byte cap can still be one huge part or hundreds of small ones.
+    if (
+      exceedsMessageBodyBytes(Buffer.byteLength(parsed.data.message ?? "", "utf8")) ||
+      checkMessageParts(firstMessage.parts) !== null
+    ) {
+      return messageTooLarge();
+    }
+
     let clientData: Record<string, unknown> | undefined;
     try {
       clientData = parsed.data.clientData