feat(dashboard-agent): the watch offer becomes a button

New "actions" view block: a row of 1-3 buttons the model may emit. A watch
action opens the watch configuration card pre-filled; ask sends the labelled
question as the user's next message; a navigate target that doesn't parse is
dropped at render time, as on chart actions.

Author: kathiekiwi

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

@@ -0,0 +1,43 @@
+/**
+ * The agent's offer, as buttons.
+ *
+ * When an answer ends in "want me to set up a watch?", this block is what makes
+ * that a click instead of a typed reply: the `watch` intent opens the watch
+ * configuration card pre-filled, `ask` sends the labelled question as the user's
+ * next message. The block only emits an intent — the host decides whether to
+ * honour it, so without `onIntent` there is nothing to render.
+ *
+ * PURE COMPONENT: props in, markup out.
+ */
+import type {
+  ActionsBlock as ActionsBlockPayload,
+  AgentIntent,
+} from "@internal/dashboard-agent-contracts";
+import { Button } from "~/components/primitives/Buttons";
+import { ChatActionsRow } from "./chat-layout";
+import { renderableActions } from "./view-actions";
+
+export function ActionsBlock({
+  block,
+  onIntent,
+}: {
+  block: ActionsBlockPayload;
+  onIntent?: (intent: AgentIntent) => void;
+}) {
+  const renderable = renderableActions(block.actions);
+  if (!onIntent || renderable.length === 0) return null;
+  return (
+    <ChatActionsRow>
+      {renderable.map((action, i) => (
+        <Button
+          key={i}
+          // The first action is the one to take; the rest are alternatives.
+          variant={i === 0 ? "primary/small" : "secondary/small"}
+          onClick={() => onIntent(action.intent as AgentIntent)}
+        >
+          {action.label}
+        </Button>
+      ))}
+    </ChatActionsRow>
+  );
+}

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

@@ -1,10 +1,6 @@
 import type { OutputColumnMetadata } from "@internal/clickhouse";
 import type { ChartBlock } from "@internal/dashboard-agent";
-import {
-  isTriggerUri,
-  type AgentIntent,
-  type ChartAction,
-} from "@internal/dashboard-agent-contracts";
+import type { AgentIntent, ChartAction } from "@internal/dashboard-agent-contracts";
 import { useEffect, useState } from "react";
 import { QueryResultsChart } from "~/components/code/QueryResultsChart";
 import type { ChartConfiguration } from "~/components/metrics/QueryWidget";
@@ -15,6 +11,7 @@ import { useOptionalOrganization } from "~/hooks/useOrganizations";
 import { useOptionalProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { ChatActionsRow } from "./chat-layout";
+import { renderableActions } from "./view-actions";
 
 // Render an agent "chart" block by running its TRQL query through the dashboard's
 // own /resources/metric endpoint (session-authed, returns rows + real column
@@ -82,12 +79,9 @@ export function ChartActions({
   actions: ChartAction[];
   onIntent?: (intent: AgentIntent) => void;
 }) {
-  // A chart action's navigate target is a plain string at the contract boundary
-  // (the model may hold no canonical URI) — only targets that really parse
-  // become buttons, so a hallucinated URI costs a button, never a dead click.
-  const renderable = actions.filter(
-    (action) => action.intent.kind !== "navigate" || isTriggerUri(action.intent.target)
-  );
+  // Only navigate targets that really parse become buttons — see
+  // `renderableActions`, shared with the standalone `actions` block.
+  const renderable = renderableActions(actions);
   if (!onIntent || renderable.length === 0) return null;
   return (
     <div className="border-t border-grid-bright px-2 pb-2 pt-2">

apps/webapp/app/components/dashboard-agent/view-actions.test.ts

@@ -0,0 +1,77 @@
+/**
+ * The `actions` block turns the agent's offer into buttons, so what matters is
+ * which actions become buttons and what each click hands back. The filter is
+ * asserted directly; `ActionsBlock` itself is checked at source level, the same
+ * way the other cards are (`InvestigationCard.test.ts`), since the panel has no
+ * DOM test host.
+ */
+import type { ActionsBlockAction } from "@internal/dashboard-agent-contracts";
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { renderableActions } from "./view-actions";
+
+const watchAction: ActionsBlockAction = {
+  label: "Set up a watch",
+  intent: {
+    kind: "watch",
+    spec: {
+      kind: "error_recurrence",
+      fingerprint: "a1b2c3",
+      checkEveryMinutes: 15,
+      maxHours: 6,
+      note: "the TypeError in send-order-receipt",
+    },
+  },
+};
+
+const askAction: ActionsBlockAction = {
+  label: "Investigate it",
+  intent: { kind: "ask", prompt: "Investigate the send-order-receipt failures." },
+};
+
+describe("renderableActions", () => {
+  it("drops a navigate action whose target isn't a trigger:// URI", () => {
+    const actions: ActionsBlockAction[] = [
+      askAction,
+      { label: "Runs", intent: { kind: "navigate", target: "/runs?status=FAILED" } },
+    ];
+    expect(renderableActions(actions)).toEqual([askAction]);
+  });
+
+  it("keeps a navigate action with a canonical target", () => {
+    const navigate: ActionsBlockAction = {
+      label: "See its failed runs",
+      intent: { kind: "navigate", target: "trigger://proj_abc/env_abc/runs" },
+    };
+    expect(renderableActions([navigate])).toEqual([navigate]);
+  });
+
+  it("keeps a watch action, spec intact — that spec is what pre-fills the card", () => {
+    expect(renderableActions([watchAction, askAction])).toEqual([watchAction, askAction]);
+  });
+
+  it("can filter every action out, leaving nothing to render", () => {
+    expect(
+      renderableActions([{ label: "Nowhere", intent: { kind: "navigate", target: "nope" } }])
+    ).toEqual([]);
+  });
+});
+
+describe("ActionsBlock", () => {
+  const source = readFileSync(new URL("./ActionsBlock.tsx", import.meta.url), "utf8");
+
+  it("hands the action's own intent to the host, and renders nothing without one", () => {
+    expect(source).toContain("onIntent(action.intent");
+    expect(source).toContain("if (!onIntent || renderable.length === 0) return null;");
+  });
+
+  it("filters through the shared filter rather than rendering every action", () => {
+    expect(source).toContain("renderableActions(block.actions)");
+  });
+
+  it("is a pure component: no app hooks, no server module, no Remix", () => {
+    expect(source).not.toMatch(/from\s+"~\/hooks\//);
+    expect(source).not.toMatch(/from\s+"@remix-run\//);
+    expect(source).not.toMatch(/\.server"/);
+  });
+});

apps/webapp/app/components/dashboard-agent/view-actions.ts

@@ -0,0 +1,22 @@
+/**
+ * Which of a card's actions become buttons.
+ *
+ * A navigate target is a plain string at the contract boundary (the model may
+ * hold no canonical URI), so only targets that really parse become buttons — a
+ * hallucinated URI costs a button, never a dead click. Shared by the `actions`
+ * block and the chart's own action row so the two can't drift.
+ */
+import {
+  isTriggerUri,
+  type ActionsBlockAction,
+  type ChartAction,
+} from "@internal/dashboard-agent-contracts";
+
+type CardAction = ChartAction | ActionsBlockAction;
+
+export function renderableActions<T extends CardAction>(actions: T[]): T[] {
+  return actions.filter((action) => {
+    const intent: CardAction["intent"] = action.intent;
+    return intent.kind !== "navigate" || isTriggerUri(intent.target);
+  });
+}

apps/webapp/app/components/dashboard-agent/view-catalog.tsx

@@ -1,4 +1,5 @@
 import type { AgentIntent, ViewBlock } from "@internal/dashboard-agent-contracts";
+import { ActionsBlock } from "./ActionsBlock";
 import { AgentChart } from "./AgentChart";
 import { InvestigationCard } from "./InvestigationCard";
 import { ReportView, type ResolvedUri } from "./ReportView";
@@ -57,6 +58,10 @@ export function ViewBlocks({
             return <RunDiagnosisCard key={key} block={block} />;
           case "chart":
             return <AgentChart key={key} block={block} onIntent={onIntent} />;
+          // The agent's offer as buttons — a watch action opens the watch card
+          // pre-filled. Renders nothing without a host to honour the intent.
+          case "actions":
+            return <ActionsBlock key={key} block={block} onIntent={onIntent} />;
           // The one progressive block: revisions share the investigationId, so
           // latest-wins above keeps a single live card.
           case "investigation":

apps/webapp/app/routes/storybook.agent-ui/manifest.ts

@@ -112,6 +112,11 @@ export const MANIFEST: GallerySection[] = [
     title: "Enveloped revisions plus a legacy block",
     group: "view-blocks",
   },
+  {
+    sectionId: "view-blocks-actions-offer",
+    title: "Actions block — the watch offer as buttons",
+    group: "view-blocks",
+  },
 
   // --- Investigation card ---------------------------------------------------
   // The shipped `InvestigationCard` (fed the real block) first, then the demo

apps/webapp/app/routes/storybook.agent-ui/route.tsx

@@ -224,6 +224,34 @@ const revisedDiagnosis: ViewBlock[] = [
 // render, in order — the pre-envelope behaviour.
 const legacyBlocks: ViewBlock[] = [externalServiceDiagnosis, lowConfidenceDiagnosis];
 
+// The watch offer as buttons: the answer ends with one line of prose, this block
+// makes the offer a click. The first action is the one to take.
+const offerActionsBlock: ViewBlock = {
+  type: "actions",
+  id: "actions-offer",
+  revision: 0,
+  version: VIEW_BLOCK_VERSION,
+  actions: [
+    {
+      label: "Set up a watch",
+      intent: {
+        kind: "watch",
+        spec: {
+          kind: "error_recurrence",
+          fingerprint: "a1b2c3",
+          checkEveryMinutes: 15,
+          maxHours: 6,
+          note: "the TypeError in send-order-receipt",
+        },
+      },
+    },
+    {
+      label: "See its failed runs",
+      intent: { kind: "navigate", target: "trigger://proj_abc/env_abc/runs" },
+    },
+  ],
+};
+
 /**
  * The badge matrix: one card per diagnosis category, cycling through the three
  * confidence levels, so every badge colour pair on the card is on screen at
@@ -939,6 +967,7 @@ const STATES: Record<string, React.ReactNode> = {
       ]}
     />
   ),
+  "view-blocks-actions-offer": <ViewBlocks blocks={[offerActionsBlock]} onIntent={noop} />,
 
   // --- Investigation card, the shipped one ---------------------------------
   // The card only, so the unfinished states show no progress line here: progress

internal-packages/dashboard-agent-contracts/src/blocks.test.ts

@@ -240,6 +240,66 @@ describe("chart actions", () => {
   });
 });
 
+describe("actions block", () => {
+  // The agent's offer, clickable: "want me to watch this?" as a button that
+  // opens the watch card pre-filled.
+  const watchAction = {
+    label: "Set up a watch",
+    intent: {
+      kind: "watch",
+      spec: {
+        kind: "error_recurrence",
+        fingerprint: "a1b2c3",
+        checkEveryMinutes: 15,
+        maxHours: 6,
+        note: "the TypeError in send-order-receipt",
+      },
+    },
+  };
+
+  const askAction = {
+    label: "Investigate it",
+    intent: { kind: "ask", prompt: "Investigate the send-order-receipt failures." },
+  };
+
+  it("round-trips through both schemas", () => {
+    const body = { type: "actions", actions: [watchAction, askAction] };
+    const input = viewBlockInputSchema.parse(body);
+    expect(input.type === "actions" && input.actions).toHaveLength(2);
+    const strict = viewBlockSchema.parse({ ...body, ...envelope });
+    expect(strict.type === "actions" && strict.actions[0].intent.kind).toBe("watch");
+    expect(parseStoredViewBlock(body).type).toBe("actions");
+  });
+
+  it("needs at least one action and caps the row at three", () => {
+    expect(viewBlockInputSchema.safeParse({ type: "actions", actions: [] }).success).toBe(false);
+    expect(
+      viewBlockInputSchema.safeParse({
+        type: "actions",
+        actions: [askAction, askAction, askAction, askAction],
+      }).success
+    ).toBe(false);
+  });
+
+  it("rejects a propose_fix intent — it is reserved and not executable", () => {
+    expect(
+      viewBlockInputSchema.safeParse({
+        type: "actions",
+        actions: [{ label: "Fix it", intent: { kind: "propose_fix", investigationId: "inv_1" } }],
+      }).success
+    ).toBe(false);
+  });
+
+  it("accepts a non-canonical navigate target — the renderer drops it", () => {
+    expect(
+      viewBlockInputSchema.safeParse({
+        type: "actions",
+        actions: [{ label: "Runs", intent: { kind: "navigate", target: "/runs?status=FAILED" } }],
+      }).success
+    ).toBe(true);
+  });
+});
+
 describe("report block", () => {
   it("round-trips a whole view model", () => {
     const parsed = reportBlockSchema.parse(reportBlock);