@foldspace_npm/harness 0.1.17 → 0.1.19

package/recipes/account-overview/agent/views/overview.ts

@@ -0,0 +1,303 @@
+// The account card from the production build. textContent only — never innerHTML
+// with API data. Styles go in `header`. Routes under `/__observe_me` are
+// placeholders: replace them with the app's own paths.
+
+import {
+  formatMoney,
+  formatPipeline,
+  formatWhen,
+  titleCase,
+  type AccountOverview,
+  type CaseSummary,
+  type ContactSummary,
+  type MeetingSummary,
+  type OpportunitySummary,
+} from "../accounts";
+import { brand } from "./brand";
+
+const SHOWN = 5;
+
+const CSS = `
+.fs-ov{background:${brand.surface};border-radius:${brand.radius};font-family:${brand.font};color:${brand.text};
+  border:1px solid ${brand.border};overflow:hidden;width:100%;box-sizing:border-box}
+.fs-ov *{box-sizing:border-box}
+.fs-ov-head{padding:16px;background:linear-gradient(135deg, ${brand.headerStart} 0%, ${brand.surface} 100%);border-bottom:1px solid ${brand.border}}
+.fs-ov-title{font-size:18px;font-weight:600;color:${brand.textStrong};margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
+.fs-ov-name{display:flex;align-items:center}
+.fs-ov-mark{width:28px;height:28px;background:linear-gradient(135deg, ${brand.accent} 0%, ${brand.accentDeep} 100%);border-radius:6px;
+  display:flex;align-items:center;justify-content:center;margin-right:10px;color:#fff;font-weight:600;font-size:11px;flex-shrink:0}
+.fs-ov-open{background:${brand.accent};color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:11px;font-weight:500;
+  cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
+.fs-ov-open svg{width:12px;height:12px}
+.fs-ov-sub{font-size:12px;color:${brand.muted};margin-bottom:12px;line-height:1.3}
+.fs-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
+.fs-ov-label{font-size:10px;color:${brand.muted};text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
+.fs-ov-value{font-size:12px;color:#E2E8F0;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fs-ov-value a{color:${brand.accent};text-decoration:none}
+.fs-ov-metrics{display:grid;grid-template-columns:repeat(4, 1fr);gap:1px;background:${brand.border}}
+.fs-ov-metric{padding:12px;background:${brand.surface};display:flex;flex-direction:column;gap:2px;text-align:center;align-items:center}
+.fs-ov-metric b{font-size:20px;font-weight:600}
+.fs-ov-deals{color:${brand.deals}}
+.fs-ov-pipeline{color:${brand.money}}
+.fs-ov-contacts{color:${brand.contacts}}
+.fs-ov-cases{color:${brand.cases}}
+.fs-ov-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid ${brand.border}}
+.fs-ov-tab{padding:12px 16px;background:transparent;border:none;color:${brand.muted};font-size:13px;font-weight:500;cursor:pointer;
+  border-bottom:2px solid transparent;text-align:center}
+.fs-ov-tab.is-active{color:${brand.accent};border-bottom-color:${brand.accent}}
+.fs-ov-panel{padding:16px}
+.fs-ov-list{display:flex;flex-direction:column;gap:10px}
+.fs-ov-row{background:${brand.row};border-radius:6px;padding:12px;border-left:3px solid ${brand.accent};color:inherit;display:block;text-decoration:none}
+.fs-ov-row-title{font-size:13px;font-weight:600;color:${brand.textStrong};margin-bottom:4px}
+.fs-ov-row-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
+.fs-ov-detail{font-size:11px;color:${brand.muted};line-height:1.3}
+.fs-ov-money{font-weight:600;color:${brand.money};font-size:12px}
+.fs-ov-badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:500}
+.fs-ov-stage-proposal{background:#6B21A8;color:#D8B4FE}
+.fs-ov-stage-qualified,.fs-ov-stage-qualification,.fs-ov-stage-discovery{background:#1E40AF;color:#DBEAFE}
+.fs-ov-stage-negotiation{background:#B45309;color:#FED7AA}
+.fs-ov-stage-closed-won,.fs-ov-stage-closed_won{background:#166534;color:#DCFCE7}
+.fs-ov-stage-closed-lost,.fs-ov-stage-closed_lost{background:#374151;color:#9CA3AF}
+.fs-ov-priority-critical{background:#DC2626;color:#FEE2E2}
+.fs-ov-priority-high{background:#EA580C;color:#FFEDD5}
+.fs-ov-priority-medium{background:#CA8A04;color:#FEF9C3}
+.fs-ov-priority-low{background:#2563EB;color:#DBEAFE}
+.fs-ov-empty{text-align:center;padding:20px 16px;color:${brand.faint};font-style:italic;font-size:12px}
+.fs-ov-more{display:flex;justify-content:flex-end;margin-bottom:12px}
+.fs-ov-more a{font-size:11px;color:${brand.accent};text-decoration:none}
+`;
+
+type Tab = "opportunities" | "meetings" | "cases" | "contacts";
+
+function el(tag: string, className: string, text?: string): HTMLElement {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function attr(node: HTMLElement, name: string, value: string): void {
+  if (typeof node.setAttribute === "function") node.setAttribute(name, value);
+}
+
+// The production build's single-page app listened for this message and routed
+// on it. No other app does — on any other product these links do nothing.
+// Open a record with a navigation route instead (CLAUDE.md, "Product defaults").
+function go(path: string): void {
+  const top = window.top;
+  if (top && typeof top.postMessage === "function") {
+    top.postMessage({ type: "NAVIGATE", path }, "*");
+  }
+}
+
+function link(className: string, path: string, text?: string): HTMLAnchorElement {
+  const node = el("a", className, text) as HTMLAnchorElement;
+  node.href = path;
+  node.addEventListener("click", (event) => {
+    if (typeof event.preventDefault === "function") event.preventDefault();
+    go(path);
+  });
+  return node;
+}
+
+function initials(name: string): string {
+  const letters = name
+    .split(" ")
+    .map((word) => word[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+  return letters || "AC";
+}
+
+function openIcon(): SVGElement | null {
+  if (typeof document.createElementNS !== "function") return null;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  attr(svg as unknown as HTMLElement, "viewBox", "0 0 24 24");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  attr(path as unknown as HTMLElement, "fill", "currentColor");
+  attr(
+    path as unknown as HTMLElement,
+    "d",
+    "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z",
+  );
+  svg.appendChild(path);
+  return svg;
+}
+
+function field(label: string, value: HTMLElement | string): HTMLElement {
+  const item = el("div", "fs-ov-field");
+  item.append(el("div", "fs-ov-label", label));
+  item.append(typeof value === "string" ? el("div", "fs-ov-value", value) : value);
+  return item;
+}
+
+function opportunityRow(row: OpportunitySummary): HTMLElement {
+  const node = link("fs-ov-row", `/__observe_me/opportunities/${row.id}`);
+  node.append(el("div", "fs-ov-row-title", row.name));
+  const meta = el("div", "fs-ov-row-meta");
+  meta.append(el("span", "fs-ov-money", formatMoney(row.value)));
+  node.append(meta);
+  const stage = row.stage ? row.stage.replaceAll("_", " ") : "unknown";
+  const close = formatWhen(row.closeDate);
+  node.append(el("div", "fs-ov-detail", close ? `Stage: ${stage} • Close: ${close}` : `Stage: ${stage}`));
+  return node;
+}
+
+function contactRow(row: ContactSummary): HTMLElement {
+  const node = link("fs-ov-row", `/__observe_me/contacts/${row.id}`);
+  node.append(el("div", "fs-ov-row-title", row.name));
+  node.append(el("div", "fs-ov-detail", row.title || "No title"));
+  const phone = row.phone ? ` • ${row.phone}` : "";
+  node.append(el("div", "fs-ov-detail", `${row.email ?? ""}${phone}`.trim()));
+  return node;
+}
+
+function caseRow(row: CaseSummary): HTMLElement {
+  const node = link("fs-ov-row", `/__observe_me/cases/${row.id}`);
+  node.append(el("div", "fs-ov-row-title", row.title));
+  if (row.priority) {
+    const meta = el("div", "fs-ov-row-meta");
+    const badge = el("span", `fs-ov-badge fs-ov-priority-${row.priority.toLowerCase()}`, titleCase(row.priority));
+    meta.append(badge);
+    node.append(meta);
+  }
+  const created = formatWhen(row.createdAt) ?? "Unknown";
+  const status = row.status ? titleCase(row.status) : "Open";
+  node.append(el("div", "fs-ov-detail", `Created: ${created} • ${status}`));
+  return node;
+}
+
+function meetingRow(row: MeetingSummary): HTMLElement {
+  const node = link("fs-ov-row", `/__observe_me/meetings/${row.id}`);
+  node.append(el("div", "fs-ov-row-title", row.title));
+  const when = formatWhen(row.startTime, true);
+  if (when) node.append(el("div", "fs-ov-detail", when));
+  const count = row.attendees;
+  node.append(el("div", "fs-ov-detail", `${count} attendee${count === 1 ? "" : "s"}`));
+  return node;
+}
+
+export function mountAccountOverview(host: HTMLElement, header: HTMLElement, overview: AccountOverview): void {
+  const style = el("style", "");
+  style.textContent = CSS;
+  header.append(style);
+
+  const { account, metrics } = overview;
+  const card = el("div", "fs-ov");
+
+  const head = el("div", "fs-ov-head");
+  const title = el("div", "fs-ov-title");
+  const name = el("div", "fs-ov-name");
+  name.append(el("div", "fs-ov-mark", initials(account.name)), el("span", "fs-ov-account", account.name));
+  const open = link("fs-ov-open", `/__observe_me/accounts/${account.id}`);
+  const icon = openIcon();
+  if (icon) open.append(icon);
+  open.append(el("span", "fs-ov-open-label", "Open Account"));
+  title.append(name, open);
+  head.append(title);
+
+  const size = account.employeeCount === null ? "Size unknown" : `${account.employeeCount.toLocaleString()} employees`;
+  head.append(el("div", "fs-ov-sub", `${account.industry || "Industry not specified"} • ${size}`));
+
+  const grid = el("div", "fs-ov-grid");
+  grid.append(field("Phone", account.phone || "Not provided"));
+  const website = el("div", "fs-ov-value");
+  if (account.website) {
+    const site = el("a", "", account.website) as HTMLAnchorElement;
+    site.href = account.website;
+    attr(site, "target", "_blank");
+    website.append(site);
+  } else {
+    website.textContent = "Not provided";
+  }
+  grid.append(field("Website", website));
+  grid.append(field("Annual Revenue", account.revenue === null ? "Not disclosed" : formatMoney(account.revenue)));
+  grid.append(field("Employees", account.employeeCount === null ? "Not specified" : account.employeeCount.toLocaleString()));
+  head.append(grid);
+  card.append(head);
+
+  const metricsBar = el("div", "fs-ov-metrics");
+  const metric = (label: string, value: string, tone: string) => {
+    const item = el("div", "fs-ov-metric");
+    item.append(el("div", "fs-ov-label", label), el("b", tone, value));
+    return item;
+  };
+  metricsBar.append(
+    metric("Open Deals", String(metrics.openOpportunities), "fs-ov-deals"),
+    metric("Pipeline", formatPipeline(metrics.pipelineValue), "fs-ov-pipeline"),
+    metric("Contacts", String(metrics.contacts), "fs-ov-contacts"),
+    metric("Open Cases", String(metrics.openCases), "fs-ov-cases"),
+  );
+  card.append(metricsBar);
+
+  const tabs: { id: Tab; label: string; count: number; empty: string; rows: HTMLElement[] }[] = [
+    {
+      id: "opportunities",
+      label: "Opportunities",
+      count: overview.opportunities.length,
+      empty: "No open opportunities",
+      rows: overview.opportunities.slice(0, SHOWN).map(opportunityRow),
+    },
+    {
+      id: "meetings",
+      label: "Meetings",
+      count: overview.recentMeetings.length,
+      empty: "No recent meetings",
+      rows: overview.recentMeetings.slice(0, SHOWN).map(meetingRow),
+    },
+    {
+      id: "cases",
+      label: "Cases",
+      count: overview.openCases.length,
+      empty: "No open cases",
+      rows: overview.openCases.slice(0, SHOWN).map(caseRow),
+    },
+    {
+      id: "contacts",
+      label: "Contacts",
+      count: overview.contacts.length,
+      empty: "No contacts",
+      rows: overview.contacts.slice(0, SHOWN).map(contactRow),
+    },
+  ];
+
+  const tabBar = el("div", "fs-ov-tabs");
+  const panel = el("div", "fs-ov-panel");
+  const buttons = new Map<Tab, HTMLButtonElement>();
+
+  const show = (id: Tab) => {
+    const tab = tabs.find((item) => item.id === id);
+    if (!tab) return;
+    for (const item of tabs) {
+      const button = buttons.get(item.id);
+      if (button) button.className = item.id === id ? "fs-ov-tab is-active" : "fs-ov-tab";
+    }
+    panel.textContent = "";
+    if (tab.count > SHOWN) {
+      const more = el("div", "fs-ov-more");
+      more.append(link("", `/__observe_me/${tab.id}?accountId=${account.id}`, "View All"));
+      panel.append(more);
+    }
+    if (tab.rows.length === 0) {
+      panel.append(el("div", "fs-ov-empty", tab.empty));
+      return;
+    }
+    const list = el("div", "fs-ov-list");
+    for (const row of tab.rows) list.append(row);
+    panel.append(list);
+  };
+
+  for (const tab of tabs) {
+    const button = el("button", "fs-ov-tab", `${tab.label} (${tab.count})`) as HTMLButtonElement;
+    button.type = "button";
+    button.addEventListener("click", () => show(tab.id));
+    buttons.set(tab.id, button);
+    tabBar.append(button);
+  }
+  card.append(tabBar, panel);
+  show("opportunities");
+
+  host.textContent = "";
+  host.append(card);
+}

package/recipes/account-overview/fixtures/overview.empty.json

@@ -0,0 +1,12 @@
+{
+  "account": {
+    "id": "acct_1",
+    "name": "Northwind",
+    "industry": "Logistics",
+    "website": null
+  },
+  "opportunities": [],
+  "contacts": [],
+  "openCases": [],
+  "recentMeetings": []
+}

package/recipes/account-overview/fixtures/overview.ok.json

@@ -0,0 +1,30 @@
+{
+  "account": {
+    "id": "acct_1",
+    "name": "Northwind",
+    "industry": "Logistics",
+    "website": "https://northwind.example",
+    "phone": "(415) 555-0148",
+    "revenue": 2400000,
+    "employeeCount": 180
+  },
+  "opportunities": [
+    { "id": "opp_1", "name": "Renewal", "value": 12000, "stage": "proposal", "closeDate": "2026-10-15" },
+    { "id": "opp_2", "name": "Expansion", "value": 6000, "stage": "qualified", "closeDate": "2026-11-02" }
+  ],
+  "contacts": [
+    { "id": "ct_1", "name": "Dana Reyes", "email": "dana@example.com", "phone": "(415) 555-0199", "title": "Buyer" },
+    { "id": "ct_2", "name": "Sam Lee", "email": "sam@example.com", "phone": "", "title": "Ops" }
+  ],
+  "openCases": [
+    { "id": "case_1", "title": "Billing question", "priority": "high", "status": "open", "createdAt": "2026-09-12" }
+  ],
+  "recentMeetings": [
+    {
+      "id": "mtg_1",
+      "title": "Quarterly review",
+      "startTime": "2026-09-22T15:00:00Z",
+      "attendees": ["Dana Reyes", "Sam Lee", "Pat"]
+    }
+  ]
+}

package/recipes/account-overview/fixtures/overview.unsigned.json

@@ -0,0 +1,9 @@
+{
+  "account": { "id": null, "name": null },
+  "opportunities": [
+    { "id": "opp_1", "name": "Renewal", "value": 18000, "stage": "proposal" }
+  ],
+  "contacts": [],
+  "openCases": [],
+  "recentMeetings": []
+}

package/recipes/account-overview/recipe.json

@@ -0,0 +1,10 @@
+{
+  "title": "Account overview",
+  "level": "L2",
+  "family": "show-a-record",
+  "kind": "action",
+  "action": "show_account_overview",
+  "entry": "agent/actions/show_account_overview.ts",
+  "outcome": "One account drawn as a card: identity, pipeline, contacts, cases, meetings",
+  "provenBy": 1
+}

package/recipes/opportunities-at-risk/README.md

@@ -0,0 +1,26 @@
+# Opportunities at risk — L2
+
+**The user says** "which deals are at risk?". **The user sees** one card: how many, their total value, the average days stalled, and a row per opportunity with the reasons the app flagged it.
+
+**Proven by 1 production build.**
+
+The app decides what "at risk" means, on the server. In that build it was: stalled 14+ days, past its close date, low probability in a late stage, critical support cases on the account, no recent meetings — each reason comes back as a short label and the card shows them as tags. The action does not re-judge anything; it draws what the API says.
+
+The card is view-only. `awaitUserInput` stays off. For a component that only shows something, the model is told that the information was displayed — nothing `execute` returned and nothing the card drew. So the empty state ("No opportunities are at risk.") is on the card, not in a message. The count, the total and the average are computed in code from the rows.
+
+In Agent Studio: an action with key `show_opportunities_at_risk` and no parameters.
+
+## Adapt it
+
+| File | Change |
+|---|---|
+| `agent/api/opportunities.ts` | Mock path and envelope. Find the app's own "needs attention" list — the one with reasons per row |
+| `agent/opportunities.ts` | Which fields a row carries. Totals stay computed here |
+| `agent/views/at-risk.ts` | The card. Re-sample `brand.ts` from the host page |
+
+## What that build learned the hard way
+
+- **A list has nothing to prove who it belongs to.** An account has an id and a name; a list does not. The build answered signed-out calls with a 401, which `apiFetch` already reports as `signed_out`. What the code still checks is that a 200 is the list at all — the rows array has to be there. ⚠️ If the app you are on answers a signed-out call with a 200 and an empty list, that check is not enough; find something in the response that only a signed-in user gets.
+- **Empty is an answer.** Zero at risk is drawn as a card that says so — never as a failure, and never as a hint about what to do next.
+- **Rows are not links.** The production build made every name clickable through a message its own single-page app listened for. No other app does; on any other product the click would do nothing. Open a record with a navigation route instead.
+- **The agent cannot see the card.** In the production build the render also handed the rows to the agent through `callback`, so it could answer "tell me more about the second one". That path is not in this recipe: with `awaitUserInput` off the platform does not deliver it, and a view-only action's data does not reach the model by design. If the agent needs the rows, that is a second, data-only action.

package/recipes/opportunities-at-risk/agent/actions/show_opportunities_at_risk.ts

@@ -0,0 +1,49 @@
+// View-only card. Do not set awaitUserInput: the model is told only that the
+// information was displayed, so the card carries every fact — including "nothing
+// is at risk". A failed or signed-out call is drawn with renderFailure, never as
+// a count of zero.
+
+import { getOpportunitiesAtRisk } from "../api/opportunities";
+import { isAtRiskList, toAtRisk, type AtRiskOverview } from "../opportunities";
+import { renderFailure, type FailureReason } from "../utils";
+import { mountOpportunitiesAtRisk } from "../views/at-risk";
+
+type ShowResult = {
+  success: boolean;
+  message?: string;
+  error?: string;
+  reason?: FailureReason;
+  data?: AtRiskOverview;
+};
+
+export const show_opportunities_at_risk = {
+  execute: async (): Promise<ShowResult> => {
+    const res = await getOpportunitiesAtRisk();
+    if (!res.ok) {
+      console.warn("[show_opportunities_at_risk]", res.status, res.reason, res.detail);
+      return { success: false, error: res.error, reason: res.reason };
+    }
+    if (!isAtRiskList(res.data)) {
+      return { success: false, error: "Not signed in.", reason: "signed_out" };
+    }
+    // `message` never reaches the model for a view-only action; it is for the console.
+    return { success: true, message: "Displayed.", data: toAtRisk(res.data) };
+  },
+
+  render: (result: ShowResult | undefined, host: HTMLElement, header: HTMLElement) => {
+    if (!result?.success || !result.data) {
+      renderFailure(
+        host,
+        {
+          ok: false,
+          status: 0,
+          error: result?.error ?? "The opportunities could not be loaded.",
+          reason: result?.reason ?? "server",
+        },
+        { notFound: "The at-risk list could not be found." },
+      );
+      return;
+    }
+    mountOpportunitiesAtRisk(host, header, result.data);
+  },
+};

package/recipes/opportunities-at-risk/agent/api/opportunities.ts

@@ -0,0 +1,30 @@
+// Mock API. This path is not a real product. Find an API that returns the open
+// opportunities the app itself considers at risk — each with the reasons — and
+// replace the path and the envelope with what you observed. `__observe_me`
+// cannot succeed until you do.
+//
+// The production build decided "at risk" on the server: stalled 14+ days, past
+// its close date, low probability in a late stage, critical support cases on
+// the account, no recent meetings. The card only shows what the API says.
+
+import { apiFetch, type ApiResult } from "../utils";
+
+export type AtRiskRecord = {
+  id?: string | null;
+  name?: string | null;
+  account?: { id?: string | null; name?: string | null } | null;
+  value?: number | string | null;
+  stage?: string | null;
+  closeDate?: string | null;
+  daysSinceUpdate?: number | null;
+  risks?: string[] | null;
+};
+
+export type AtRiskPayload = {
+  summary?: { dealCount?: number | null; totalValue?: number | null; avgDaysStalled?: number | null } | null;
+  deals?: AtRiskRecord[] | null;
+};
+
+export async function getOpportunitiesAtRisk(): Promise<ApiResult<AtRiskPayload>> {
+  return apiFetch<AtRiskPayload>("/__observe_me/opportunities/at-risk");
+}

package/recipes/opportunities-at-risk/agent/opportunities.ts

@@ -0,0 +1,75 @@
+// The count, the total and the average are computed here, from the rows the API
+// returned. The model does not add them, and the card does not trust a total the
+// server sent alongside rows that may disagree with it.
+
+import type { AtRiskPayload } from "./api/opportunities";
+
+export type AtRiskOpportunity = {
+  id: string;
+  name: string;
+  accountName: string | null;
+  value: number;
+  stage: string | null;
+  closeDate: string | null;
+  daysSinceUpdate: number | null;
+  risks: string[];
+};
+
+export type AtRiskOverview = {
+  metrics: { count: number; totalValue: number; avgDaysStalled: number };
+  opportunities: AtRiskOpportunity[];
+};
+
+/**
+ * A list has no id or name of its own to prove it belongs to a signed-in user.
+ * The production build answered a signed-out call with a 401, which `apiFetch`
+ * already maps to `signed_out`. What this guards against is a 200 that is not
+ * the list at all — a login page, an empty object — being drawn as "nothing at
+ * risk". The rows array has to be there; an empty one is a real answer.
+ */
+export function isAtRiskList(payload: AtRiskPayload): boolean {
+  return Array.isArray(payload.deals);
+}
+
+export function formatMoney(value: number): string {
+  const rounded = Math.round(value);
+  const sign = rounded < 0 ? "-" : "";
+  const digits = String(Math.abs(rounded));
+  const grouped = digits.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${sign}$${grouped}`;
+}
+
+export function stageLabel(stage: string | null): string {
+  return stage ? stage.replace(/_/g, " ") : "unknown";
+}
+
+function toNumber(value: number | string | null | undefined): number {
+  const parsed = typeof value === "string" ? Number(value) : value;
+  return typeof parsed === "number" && Number.isFinite(parsed) ? parsed : 0;
+}
+
+export function toAtRisk(payload: AtRiskPayload): AtRiskOverview {
+  const opportunities = (payload.deals ?? []).map((row) => ({
+    id: row.id?.trim() || "",
+    name: row.name?.trim() || "Untitled",
+    accountName: row.account?.name?.trim() || null,
+    value: toNumber(row.value),
+    stage: row.stage?.trim() || null,
+    closeDate: row.closeDate?.trim() || null,
+    daysSinceUpdate:
+      typeof row.daysSinceUpdate === "number" && Number.isFinite(row.daysSinceUpdate) ? row.daysSinceUpdate : null,
+    risks: (row.risks ?? []).filter((risk): risk is string => typeof risk === "string" && risk.trim() !== ""),
+  }));
+
+  const stalled = opportunities.map((row) => row.daysSinceUpdate).filter((days): days is number => days !== null);
+  const avgDaysStalled = stalled.length ? Math.round(stalled.reduce((sum, days) => sum + days, 0) / stalled.length) : 0;
+
+  return {
+    metrics: {
+      count: opportunities.length,
+      totalValue: opportunities.reduce((sum, row) => sum + row.value, 0),
+      avgDaysStalled,
+    },
+    opportunities,
+  };
+}

package/recipes/opportunities-at-risk/agent/views/at-risk.ts

@@ -0,0 +1,115 @@
+// The at-risk card from the production build, laid out as rows instead of the
+// build's five-column table: the chat is ~400px wide and a table clipped the
+// reasons. textContent only — never innerHTML with API data. Styles go in
+// `header`.
+//
+// Rows are not links. The production build made each name clickable through a
+// message its own single-page app listened for; no other app does. To open a
+// record from here, use a navigation route (see CLAUDE.md, "Product defaults").
+
+import { formatMoney, stageLabel, type AtRiskOverview } from "../opportunities";
+import { brand } from "./brand";
+
+const CSS = `
+.fs-risk{background:${brand.surface};border-radius:${brand.radius};font-family:${brand.font};color:${brand.text};
+  border:1px solid ${brand.border};overflow:hidden;width:100%;box-sizing:border-box}
+.fs-risk *{box-sizing:border-box;margin:0}
+.fs-risk-head{padding:16px;background:linear-gradient(135deg, ${brand.headerStart} 0%, ${brand.surface} 100%);border-bottom:1px solid ${brand.border}}
+.fs-risk-title{font-size:16px;font-weight:600;color:${brand.textStrong};display:flex;align-items:center;gap:8px}
+.fs-risk-mark{width:18px;height:18px;color:${brand.warn};flex-shrink:0}
+.fs-risk-stats{display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;background:${brand.border};border-bottom:1px solid ${brand.border}}
+.fs-risk-stat{padding:12px;background:${brand.surface};display:flex;flex-direction:column;gap:2px;text-align:center;align-items:center}
+.fs-risk-stat b{font-size:20px;font-weight:600;color:${brand.textStrong}}
+.fs-risk-stat b.is-money{color:${brand.money}}
+.fs-risk-label{font-size:10px;color:${brand.muted};text-transform:uppercase;letter-spacing:.5px}
+.fs-risk-list{display:flex;flex-direction:column;gap:10px;padding:16px}
+.fs-risk-row{background:${brand.row};border-radius:6px;padding:12px;border-left:3px solid ${brand.warn}}
+.fs-risk-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
+.fs-risk-name{font-size:13px;font-weight:600;color:${brand.textStrong};overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fs-risk-money{font-weight:600;color:${brand.money};font-size:12px;white-space:nowrap}
+.fs-risk-detail{font-size:11px;color:${brand.muted};line-height:1.3;margin-bottom:8px}
+.fs-risk-stage{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:500;background:${brand.headerStart};
+  color:${brand.accent};text-transform:capitalize;white-space:nowrap;margin-left:6px}
+.fs-risk-tags{display:flex;flex-wrap:wrap;gap:4px}
+.fs-risk-tag{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:500;background:${brand.warnInk};color:${brand.warn}}
+.fs-risk-empty{text-align:center;padding:24px 16px;color:${brand.faint};font-style:italic;font-size:12px}
+`;
+
+const WARN_PATH =
+  "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z";
+
+function el(tag: string, className: string, text?: string): HTMLElement {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+
+function warnIcon(): SVGElement | null {
+  if (typeof document.createElementNS !== "function") return null;
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "fs-risk-mark");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  path.setAttribute("stroke-linecap", "round");
+  path.setAttribute("stroke-linejoin", "round");
+  path.setAttribute("stroke-width", "2");
+  path.setAttribute("d", WARN_PATH);
+  svg.appendChild(path);
+  return svg;
+}
+
+export function mountOpportunitiesAtRisk(host: HTMLElement, header: HTMLElement, overview: AtRiskOverview): void {
+  const style = el("style", "");
+  style.textContent = CSS;
+  header.append(style);
+
+  const { metrics, opportunities } = overview;
+  const card = el("div", "fs-risk");
+
+  const head = el("div", "fs-risk-head");
+  const title = el("div", "fs-risk-title");
+  const mark = warnIcon();
+  if (mark) title.append(mark);
+  title.append(el("span", "", "Opportunities at risk"));
+  head.append(title);
+  card.append(head);
+
+  const stats = el("div", "fs-risk-stats");
+  const stat = (label: string, value: string, money = false) => {
+    const node = el("div", "fs-risk-stat");
+    node.append(el("b", money ? "is-money" : "", value), el("div", "fs-risk-label", label));
+    return node;
+  };
+  stats.append(
+    stat("At risk", String(metrics.count)),
+    stat("Total value", formatMoney(metrics.totalValue), true),
+    stat("Avg days stalled", String(metrics.avgDaysStalled)),
+  );
+  card.append(stats);
+
+  if (opportunities.length === 0) {
+    card.append(el("div", "fs-risk-empty", "No opportunities are at risk."));
+  } else {
+    const list = el("div", "fs-risk-list");
+    for (const row of opportunities) {
+      const item = el("div", "fs-risk-row");
+      const line = el("div", "fs-risk-line");
+      line.append(el("div", "fs-risk-name", row.name), el("div", "fs-risk-money", formatMoney(row.value)));
+      item.append(line);
+      const detail = el("div", "fs-risk-detail", row.accountName ?? "No account");
+      detail.append(el("span", "fs-risk-stage", stageLabel(row.stage)));
+      item.append(detail);
+      const tags = el("div", "fs-risk-tags");
+      for (const risk of row.risks) tags.append(el("span", "fs-risk-tag", risk));
+      item.append(tags);
+      list.append(item);
+    }
+    card.append(list);
+  }
+
+  host.textContent = "";
+  host.append(card);
+}