fix(webapp): action rows render at the end of the turn

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

@@ -133,6 +133,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.
 
@@ -242,6 +258,7 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
   if (parts.length === 0) return null;
 
   const body: React.ReactNode[] = [];
+  const actionRows: React.ReactNode[] = [];
   for (let i = 0; i < parts.length; i++) {
     const part = parts[i]!;
 
@@ -252,19 +269,21 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
         `${message.id}:${i}`,
         investigationWinners
       );
-      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)}
-            />
-          </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)}
+          />
+        </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;
     }
 
@@ -285,7 +304,12 @@ const DashboardAgentTurn = memo(function DashboardAgentTurn({
     body.push(renderDashboardPart(part, i, resolveUri));
   }
 
-  return <ChatTurn>{body}</ChatTurn>;
+  return (
+    <ChatTurn>
+      {body}
+      {actionRows}
+    </ChatTurn>
+  );
 });
 
 export function DashboardAgentTurns({