feat(webapp): dashboard agent — chat, reports, investigate

.changeset/chat-stream-mid-turn-reconnect.md

@@ -0,0 +1,7 @@
+---
+"@trigger.dev/core": patch
+"@trigger.dev/sdk": patch
+"trigger.dev": patch
+---
+
+Chat in the browser now reconnects when the connection drops mid-turn, instead of leaving the reply stuck as if it were still generating. Reports can be fetched as structured data with the `json` format, and the shortest report period is now one minute (`30m`, `1h`, `7d`). The `mint-token` command's help is clearer too: a token minted without `--cap` is read-only, and `--ttl` shows the correct maximum lifetime of 7 days.

.claude/skills/errors-api-e2e/SKILL.md

@@ -154,7 +154,7 @@ PASS: one run, `run_<RID>` (status maps to `FAILED`). Proves `filter[error]` ->
 ### 6. Attribution — `mint-token` -> JWT exchange records the acting user
 
 ```bash
-TOKEN=$(cli mint-token --profile $PROFILE --client errors-api-e2e 2>/dev/null)            # UAT
+TOKEN=$(cli mint-token --profile $PROFILE --client errors-api-e2e --cap read:errors,write:errors 2>/dev/null)            # UAT
 ENVJWT=$(curl -sS -X POST "$B/api/v1/projects/$REF/dev/jwt" -H "Authorization: Bearer $TOKEN" \
   -H 'Content-Type: application/json' -d '{"claims":{"scopes":["read:errors","write:errors"]}}' \
   | python3 -c "import sys,json;print(json.load(sys.stdin)['token'])")

.gitattributes

@@ -0,0 +1,5 @@
+# Generated, not hand-written: collapsed in diffs and excluded from language stats.
+internal-packages/dashboard-agent-db/drizzle/meta/*.json linguist-generated=true
+internal-packages/dashboard-agent-db/drizzle/meta/** linguist-generated=true
+**/__snapshots__/*.snap linguist-generated=true
+pnpm-lock.yaml linguist-generated=true

.gitignore

@@ -85,3 +85,5 @@ ailogger-output.log
 
 # observability-map CLI output artifact, not committed
 observability-map.json
+
+.claude/worktrees/

.server-changes/dashboard-agent.md

@@ -0,0 +1,8 @@
+---
+area: webapp
+type: feature
+---
+
+Meet the dashboard agent: a chat in every environment that answers questions about your runs, queues, errors and health with real data and links, replacing Ask AI everywhere it used to appear. Investigate a failed run, an error, a backed-up queue or a run that hasn't started to get a worked-through answer — what happened, why, and how to fix it, with every claim linked to the runs, errors and deploys behind it. It reads your data read-only, works on preview and dev branches with that branch's own data, and reads the same everywhere — dashboard, terminal, editor. A very long chat keeps working: the agent summarises the earlier part and carries on.
+
+A sample of conversations is scored automatically so the agent keeps getting better; only the score and a one-line summary are kept, never your messages, data or code, and we can switch it off for your organization on request. The Docs button is gone from page headers — ask the agent instead, or open Documentation from Help & Feedback. Separately, a queue's wait times, peak depth, throughput and throttling can now be read from the API.

apps/webapp/.gitignore

@@ -7,6 +7,9 @@ node_modules
 /cypress/screenshots
 /cypress/videos
 
+# Output of `pnpm run agent-ui:screenshots`
+/screenshots
+
 /app/styles/tailwind.css
 
 # Ensure the .env symlink is not removed by accident
@@ -20,4 +23,4 @@ storybook-static
 
 /prisma/seed.js
 /prisma/populate.js
-.memory-snapshots
+.memory-snapshots

apps/webapp/app/components/AskAI.tsx

@@ -1,3 +1,9 @@
+/**
+ * @deprecated Superseded by the dashboard agent (`components/dashboard-agent`). Nothing mounts
+ * this any more — every Ask AI entry point now opens Ask Trigger. Kept until the agent has
+ * shipped, then removed along with `@kapaai/react-sdk` and `KAPA_AI_WEBSITE_ID`.
+ */
+
 import {
   ArrowPathIcon,
   ArrowUpIcon,
@@ -81,6 +87,8 @@ function useAskAIState() {
  * it around the popover, not inside, so the dialog and shortcut survive the popover closing.
  * `children` receives the open function, or undefined when Ask AI is unavailable (self-hosted, no
  * Kapa website id, or SSR).
+ *
+ * @deprecated See the note at the top of this file.
  */
 export function AskAIRoot({
   children,
@@ -137,6 +145,7 @@ function AskAIRootProvider({
   );
 }
 
+/** @deprecated See the note at the top of this file. */
 export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const websiteId = useKapaWebsiteId();

apps/webapp/app/components/code/StreamdownRenderer.test.ts

@@ -0,0 +1,80 @@
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { restrictModelUrls, StreamdownRenderer } from "./StreamdownRenderer";
+
+// streamdown calls urlTransform(url, key, node) to compute each url attribute; a
+// returned undefined removes the attribute, so no request is ever issued.
+const img = { tagName: "img" } as any;
+const link = { tagName: "a" } as any;
+
+describe("restrictModelUrls (image src)", () => {
+  it("drops a remote model-authored image (the favicon beacon)", () => {
+    expect(
+      restrictModelUrls("https://www.google.com/s2/favicons?domain=evil", "src", img)
+    ).toBeUndefined();
+  });
+
+  it("drops any absolute or protocol-relative remote image", () => {
+    expect(restrictModelUrls("http://evil.tld/pixel.gif", "src", img)).toBeUndefined();
+    expect(restrictModelUrls("//evil.tld/pixel.gif", "src", img)).toBeUndefined();
+  });
+
+  it("keeps inline and same-origin images", () => {
+    expect(restrictModelUrls("data:image/png;base64,AAAA", "src", img)).toBe(
+      "data:image/png;base64,AAAA"
+    );
+    expect(restrictModelUrls("blob:abc", "src", img)).toBe("blob:abc");
+    expect(restrictModelUrls("/local/pic.png", "src", img)).toBe("/local/pic.png");
+  });
+});
+
+describe("restrictModelUrls (link href)", () => {
+  it("keeps http(s), mailto and relative links", () => {
+    expect(restrictModelUrls("https://trigger.dev/docs", "href", link)).toBe(
+      "https://trigger.dev/docs"
+    );
+    expect(restrictModelUrls("http://example.com", "href", link)).toBe("http://example.com");
+    expect(restrictModelUrls("mailto:hi@trigger.dev", "href", link)).toBe("mailto:hi@trigger.dev");
+    expect(restrictModelUrls("/runs/123", "href", link)).toBe("/runs/123");
+  });
+
+  it("drops unsafe link schemes", () => {
+    expect(restrictModelUrls("javascript:alert(1)", "href", link)).toBeUndefined();
+    expect(restrictModelUrls("data:text/html,<script>", "href", link)).toBeUndefined();
+  });
+});
+
+// Force the lazy component to load, then return its resolved default so we can render it
+// synchronously. This proves the policy is actually wired into the JSX, not just exported.
+async function resolveStreamdownRenderer() {
+  const lazy = StreamdownRenderer as unknown as {
+    _payload: unknown;
+    _init: (payload: unknown) => (props: { children: string }) => JSX.Element;
+  };
+  try {
+    lazy._init(lazy._payload);
+  } catch (thenable) {
+    await thenable;
+  }
+  return lazy._init(lazy._payload);
+}
+
+describe("StreamdownRenderer (rendered markdown)", () => {
+  it("never lets a model-authored remote image src reach the DOM", async () => {
+    const Renderer = await resolveStreamdownRenderer();
+    const markdown = [
+      "![x](https://www.google.com/s2/favicons?domain=SECRET.evil.tld)",
+      "![y](//evil.tld/pixel.gif)",
+      "![z](/local/pic.png)",
+    ].join("\n\n");
+    const html = renderToStaticMarkup(createElement(Renderer, null, markdown));
+
+    // No remote host is ever fetched: no absolute or protocol-relative image src survives.
+    expect(html).not.toContain('src="http');
+    expect(html).not.toContain('src="//');
+    expect(html).not.toContain("SECRET.evil.tld");
+    // A same-origin relative image is untouched, so the policy does not over-block.
+    expect(html).toContain('src="/local/pic.png"');
+  });
+});

apps/webapp/app/components/code/StreamdownRenderer.tsx

@@ -1,5 +1,32 @@
 import { lazy } from "react";
-import type { CodeHighlighterPlugin } from "streamdown";
+import type { CodeHighlighterPlugin, UrlTransform } from "streamdown";
+
+const SAFE_LINK_SCHEMES = new Set(["http:", "https:", "mailto:"]);
+
+/**
+ * URL policy for model-authored markdown. A remote image is fetched the moment it
+ * renders — no click — so it is a zero-click data beacon; we drop the src of any
+ * non-local image. Links stay clickable but only for safe, human-followable schemes.
+ * streamdown removes an attribute whose transform returns undefined, so no request fires.
+ */
+export const restrictModelUrls: UrlTransform = (url, key, node) => {
+  const value = url.trim();
+  const isImage = node.tagName === "img" || key === "src" || key === "srcset";
+
+  if (isImage) {
+    // Inline images carry their own bytes; a relative path resolves to our own origin.
+    if (/^data:/i.test(value) || /^blob:/i.test(value)) return url;
+    // Absolute or protocol-relative means a remote host — strip it so nothing is fetched.
+    if (/^[a-z][a-z0-9+.-]*:/i.test(value) || value.startsWith("//")) return undefined;
+    return url;
+  }
+
+  // Links: relative and protocol-relative are fine; otherwise require a safe scheme.
+  if (value.startsWith("//")) return url;
+  const schemeMatch = /^([a-z][a-z0-9+.-]*):/i.exec(value);
+  if (!schemeMatch) return url;
+  return SAFE_LINK_SCHEMES.has(`${schemeMatch[1].toLowerCase()}:`) ? url : undefined;
+};
 
 export const StreamdownRenderer = lazy(() =>
   Promise.all([import("streamdown"), import("@streamdown/code"), import("./shikiTheme")]).then(
@@ -23,6 +50,7 @@ export const StreamdownRenderer = lazy(() =>
             isAnimating={isAnimating}
             plugins={{ code: codePlugin }}
             controls={{ code: { copy: false, download: false } }}
+            urlTransform={restrictModelUrls}
             linkSafety={{ enabled: false }}
           >
             {children}

apps/webapp/app/components/code/tsql/tsqlLinter.test.ts

@@ -68,9 +68,10 @@ describe("tsqlLinter", () => {
       expect(error).toContain("line");
     });
 
-    it("should handle missing FROM clause", () => {
-      const error = getTSQLError("SELECT * WHERE id = 1");
-      expect(error).not.toBeNull();
+    it("should accept a query without a FROM clause", () => {
+      // FROM is optional in the grammar (ClickHouse allows e.g. `SELECT 1`),
+      // so a FROM-less SELECT is syntactically valid.
+      expect(getTSQLError("SELECT * WHERE id = 1")).toBeNull();
     });
   });
 });

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/components/dashboard-agent/resolve-uris.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { MAX_URIS_PER_RESOLVE_REQUEST, planUriBatches } from "./resolve-uris";
+
+const uri = (index: number) => `trigger://runs/run_${index}`;
+
+describe("planUriBatches", () => {
+  it("resolves a card's twenty citations in one request", () => {
+    const batches = planUriBatches(Array.from({ length: 20 }, (_, index) => uri(index)));
+
+    expect(batches).toHaveLength(1);
+    expect(batches[0]).toHaveLength(20);
+  });
+
+  it("asks about each URI once", () => {
+    const batches = planUriBatches([uri(1), uri(1), uri(2)]);
+
+    expect(batches).toEqual([[uri(1), uri(2)]]);
+  });
+
+  it("caps a request and carries the rest over", () => {
+    const count = MAX_URIS_PER_RESOLVE_REQUEST + 3;
+    const batches = planUriBatches(Array.from({ length: count }, (_, index) => uri(index)));
+
+    expect(batches).toHaveLength(2);
+    expect(batches[0]).toHaveLength(MAX_URIS_PER_RESOLVE_REQUEST);
+    expect(batches[1]).toHaveLength(3);
+  });
+
+  it("has nothing to send for nothing", () => {
+    expect(planUriBatches([])).toEqual([]);
+  });
+});

apps/webapp/app/components/dashboard-agent/resolve-uris.ts

@@ -0,0 +1,25 @@
+/**
+ * Batching for `trigger://` resolution. An investigation card cites ten to twenty targets, and
+ * each request re-authorises and re-resolves the environment — so they go in one request.
+ */
+
+/** One environment lookup and one repo lookup serve a whole batch. */
+export const MAX_URIS_PER_RESOLVE_REQUEST = 25;
+
+/** A transient failure is worth retrying; a third one isn't. */
+export const MAX_RESOLVE_ATTEMPTS = 3;
+
+export const RESOLVE_RETRY_DELAY_MS = 1_000;
+
+/** Deduplicates, then splits into requests no bigger than the cap. */
+export function planUriBatches(
+  uris: readonly string[],
+  cap: number = MAX_URIS_PER_RESOLVE_REQUEST
+): string[][] {
+  const unique = [...new Set(uris)];
+  const batches: string[][] = [];
+  for (let index = 0; index < unique.length; index += cap) {
+    batches.push(unique.slice(index, index + cap));
+  }
+  return batches;
+}