Merge branch 'feat/dashboard-agent-flows-watch' into feat/agent-storybook-gallery

Author: kathiekiwi

apps/webapp/app/components/dashboard-agent/DashboardAgentMessages.render.test.ts

@@ -0,0 +1,143 @@
+import type { UIMessage } from "@ai-sdk/react";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { OperatingSystemContextProvider } from "~/components/primitives/OperatingSystemProvider";
+import { ShortcutsProvider } from "~/components/primitives/ShortcutsProvider";
+import { DashboardAgentTurns, splitActionsBlocks } from "./DashboardAgentMessages";
+
+/**
+ * The model emits the actions block wherever it likes — the renderer pins the buttons to
+ * the bottom of the turn. Static markup, so this proves the rendered order and nothing
+ * about interaction.
+ */
+
+const actionsBlock = (label: string) => ({
+  type: "actions",
+  id: label,
+  revision: 0,
+  version: 1,
+  actions: [{ label, intent: { kind: "ask", prompt: `${label}?` } }],
+});
+
+const card = {
+  type: "investigation",
+  id: "inv_1",
+  revision: 0,
+  version: 1,
+  investigation: {
+    outcome: "concluded",
+    severity: "crit",
+    confidence: "high",
+    title: "A card that is not an actions row",
+    headline: "Every attempt dies on a null order id.",
+    remediation: "Guard the receipt builder against a missing order.",
+    hypotheses: [],
+    evidence: [],
+  },
+};
+
+function text(value: string) {
+  return { type: "text", text: value };
+}
+
+function view(...blocks: unknown[]) {
+  return { type: "tool-render_view", state: "output-available", output: { blocks } };
+}
+
+function markup(parts: unknown[]) {
+  const message = { id: "m1", role: "assistant", parts } as unknown as UIMessage;
+  return renderToStaticMarkup(
+    createElement(
+      OperatingSystemContextProvider,
+      { platform: "mac" },
+      createElement(
+        ShortcutsProvider,
+        null,
+        createElement(DashboardAgentTurns, {
+          messages: [message],
+          activity: null,
+          onIntent: () => {},
+        })
+      )
+    )
+  );
+}
+
+function order(html: string, ...needles: string[]) {
+  return needles.map((needle) => html.indexOf(needle));
+}
+
+describe("action rows render at the end of the turn", () => {
+  it("moves an actions block below the closing text it was emitted above", () => {
+    const html = markup([
+      text("Here is what I found."),
+      view(actionsBlock("Watch it")),
+      text("Want me to watch it?"),
+    ]);
+
+    const [found, offer, button] = order(
+      html,
+      "Here is what I found.",
+      "Want me to watch it?",
+      "Watch it"
+    );
+    expect(found).toBeGreaterThan(-1);
+    expect(offer).toBeGreaterThan(-1);
+    expect(button).toBeGreaterThan(offer);
+  });
+
+  it("keeps two actions blocks in their relative order, both after the card", () => {
+    const html = markup([view(actionsBlock("First")), view(card), view(actionsBlock("Second"))]);
+
+    const [summary, first, second] = order(
+      html,
+      "A card that is not an actions row",
+      "First",
+      "Second"
+    );
+    expect(first).toBeGreaterThan(summary);
+    expect(second).toBeGreaterThan(first);
+  });
+
+  it("leaves a turn without actions exactly as emitted", () => {
+    const html = markup([text("Only text."), view(card), text("Then more text.")]);
+
+    const [only, summary, more] = order(
+      html,
+      "Only text.",
+      "A card that is not an actions row",
+      "Then more text."
+    );
+    expect(summary).toBeGreaterThan(only);
+    expect(more).toBeGreaterThan(summary);
+  });
+
+  it("pulls the actions out of a block list that also carries a card", () => {
+    const html = markup([view(actionsBlock("Watch it"), card), text("Want me to watch it?")]);
+
+    const [summary, offer, button] = order(
+      html,
+      "A card that is not an actions row",
+      "Want me to watch it?",
+      "Watch it"
+    );
+    expect(offer).toBeGreaterThan(summary);
+    expect(button).toBeGreaterThan(offer);
+  });
+});
+
+describe("splitActionsBlocks", () => {
+  it("separates actions from everything else, each keeping its order", () => {
+    const first = actionsBlock("First");
+    const second = actionsBlock("Second");
+    expect(splitActionsBlocks([first, card, second])).toEqual({
+      content: [card],
+      actions: [first, second],
+    });
+  });
+
+  it("returns no actions when the list has none", () => {
+    expect(splitActionsBlocks([card])).toEqual({ content: [card], actions: [] });
+  });
+});

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

@@ -138,6 +138,22 @@ function withoutSupersededInvestigations(
   });
 }
 
+function isActionsBlock(block: unknown): boolean {
+  return (block as { type?: unknown } | null)?.type === "actions";
+}
+
+/**
+ * Buttons belong at the bottom of a turn, wherever the model emitted them: the actions
+ * blocks are rendered after everything else, keeping their order among themselves.
+ * Display only — the parts the turn walks are untouched.
+ */
+export function splitActionsBlocks<T>(blocks: T[]): { content: T[]; actions: T[] } {
+  return {
+    content: blocks.filter((block) => !isActionsBlock(block)),
+    actions: blocks.filter(isActionsBlock),
+  };
+}
+
 // #region chat-layout transcript
 // `chat-layout.test.ts` fails if a spacing utility class appears in this region.
 
@@ -267,25 +283,28 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
     );
 
   const body: React.ReactNode[] = [];
+  const actionRows: React.ReactNode[] = [];
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i]!;
 
     const blocks = blocksByPart[i];
     if (blocks) {
-      if (blocks.length > 0) {
-        body.push(
-          <ChatCardSlot key={i}>
-            <ViewBlocks
-              blocks={blocks as never}
-              onIntent={onIntent}
-              resolveUri={resolveUri}
-              pagePaths={pagePaths}
-              answered={answerContinuesAfter(parts as never, i)}
-              watchOfferedInTurn={watchOfferedInTurn}
-            />
-          </ChatCardSlot>
-        );
-      }
+      // `answered` stays keyed on the emission index: the reorder is display only.
+      const slot = (list: unknown[], key: string) => (
+        <ChatCardSlot key={key}>
+          <ViewBlocks
+            blocks={list as never}
+            onIntent={onIntent}
+            resolveUri={resolveUri}
+            pagePaths={pagePaths}
+            answered={answerContinuesAfter(parts as never, i)}
+            watchOfferedInTurn={watchOfferedInTurn}
+          />
+        </ChatCardSlot>
+      );
+      const { content, actions } = splitActionsBlocks(blocks);
+      if (content.length > 0) body.push(slot(content, `${i}`));
+      if (actions.length > 0) actionRows.push(slot(actions, `actions-${i}`));
       continue;
     }
 
@@ -316,12 +335,18 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
           }
         >
           {body}
+          {actionRows}
         </ChatWakeSlot>
       </ChatTurn>
     );
   }
 
-  return <ChatTurn>{body}</ChatTurn>;
+  return (
+    <ChatTurn>
+      {body}
+      {actionRows}
+    </ChatTurn>
+  );
 });
 
 export function DashboardAgentTurns({

apps/webapp/test/dashboardAgentWatches.test.ts

@@ -51,6 +51,8 @@ const ctx = vi.hoisted(() => ({
   agentDb: undefined as unknown as DashboardAgentDb,
   canAccess: true,
   actor: undefined as undefined | { userId: string; client?: string; environmentId?: string },
+  /** Every task id the suite would have triggered for real. */
+  triggered: [] as string[],
 }));
 
 vi.mock("~/services/uatRoutePreamble.server", () => ({
@@ -84,6 +86,23 @@ vi.mock("~/v3/canAccessDashboardAgent.server", () => ({
   canAccessDashboardAgent: async () => ctx.canAccess,
 }));
 
+// The routes drive the real service, which builds a TriggerClient from .env — so an unmocked
+// suite triggers actual runs against whatever origin .env names.
+vi.mock("@trigger.dev/sdk", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@trigger.dev/sdk")>();
+  return {
+    ...actual,
+    TriggerClient: class {
+      tasks = {
+        trigger: async (taskId: string) => {
+          ctx.triggered.push(taskId);
+          return { id: "run_test" };
+        },
+      };
+    },
+  };
+});
+
 const SESSION_SECRET = "test-session-secret-for-watch-tokens";
 process.env.SESSION_SECRET = SESSION_SECRET;
 // The agent's subscribe endpoint refuses without an email transport configured.
@@ -1594,6 +1613,9 @@ describe("the check endpoint", () => {
     const body = await response.json();
     expect(body.result).toBe("terminal_unsatisfied");
 
+    // Arming the chain goes through the stubbed client, never a real trigger.
+    expect(ctx.triggered).toContain("dashboard-agent-watch-batch");
+
     const row = await getWatch(ctx.agentDb, { id: watch.watchId });
     expect(row?.lastCheckedAt).not.toBeNull();
     expect(row?.tickCount).toBe(0);