Recommendation card

import { RecCard, RecRow } from "@/pages/harness/HomePage";

Home shows the first six recommendations that are waiting for a decision, either as a grid of cards or as a list. RecCard and RecRow are the same recommendation in those two layouts. Both are a single button that opens the recommendation on the Recommendations page, and both show the same four parts:

1. Type: what the recommendation makes or changes, with an icon in --color-primary-500.
2. Title and basis: what it says, and the evidence in one or two lines.
3. Urgency: how soon to decide, as coloured text with an icon.
4. Channel: the ad platform it acts on, with its source icon. Left out when the recommendation has no platform.

CardCopy Anchor Link

<div className="grid grid-cols-3 gap-4 items-stretch">
  {top.map((r) => (
    <RecCard key={r.id} rec={r} onOpen={() => navigate(`/recommendations?rec=${r.id}`)} />
  ))}
</div>

Home puts the cards in three columns, 16px apart. The example uses two to fit this page. items-stretch keeps cards in a row the same height, and the footer is pushed to the bottom of each one.

List rowCopy Anchor Link

The list view is a table: a 36px header row and one 60px row per recommendation, with the same columns in both.

const LIST_COLS = "168px minmax(0,1fr) 150px 116px 24px";

<div className="overflow-hidden rounded-lg border border-solid border-[var(--color-grey-100)] bg-white">
  <div
    className="grid items-center gap-4 h-9 px-4 bg-[var(--color-grey-50)] text-[12px] font-medium uppercase tracking-[0.04em] text-[var(--text-muted)]"
    style={{ gridTemplateColumns: LIST_COLS }}
  >
    <span>Type</span><span>Recommendation</span><span>Channel</span><span>When</span><span />
  </div>
  {top.map((r) => (
    <RecRow key={r.id} rec={r} onOpen={() => navigate(`/recommendations?rec=${r.id}`)} />
  ))}
</div>

The header row is not part of RecRow, and LIST_COLS is not exported from HomePage.jsx. If you use RecRow anywhere else, copy the column template exactly, or the header and the rows will not line up.

Each row is at least 60px tall, with 16px side padding and a --color-grey-100 rule on top. Title and basis are one line each. On hover the row turns --color-grey-50 and a 13px arrow appears in the last column.

UrgencyCopy Anchor Link

TypeCopy Anchor Link

The type comes from the recommendation's fields, checked in this order:

These are the icons the prompts under the Home composer use, so a "Landing page" card and the "Demo page for the Q4 campaign" prompt share a mark. The MAKES map also has Report (FileText), but no recommendation is given that type.

<RecCard rec={{ ...rec, draftPage: { name: "Forecast review demo page" } }} onOpen={open} />
<RecCard rec={{ ...rec, draftCreative: { name: "Retargeting ad refresh" } }} onOpen={open} />

Long textCopy Anchor Link

The title stays on one line and the basis stops at two. The card keeps its height, so a row of cards stays even.

<RecCard rec={rec} onOpen={open} />

ChannelCopy Anchor Link

rec.platform is looked up with platformOf from src/mocks/agentWorkflows.js: "google-search" shows Google Ads, "linkedin" and "linkedin-web" show LinkedIn Ads, and "meta" shows Meta Ads. Any other id is shown as written. With no platform, the card leaves the right of the footer empty and the row leaves the Channel column empty.

PropsCopy Anchor Link

Both components take the same props.

AccessibilityCopy Anchor Link

• Each card and row is one native <button type="button">, so it is reachable with Tab and opens with Enter or Space. Its accessible name is all of its text: type, title, basis, urgency and channel.
• There is no focus style of its own; it relies on the browser's focus ring. The row's arrow appears on hover only, not on keyboard focus.
• The full-title tooltip on a card opens on hover of the title. Keyboard users get the full title from the button's name instead.
• Urgency is shown with a label as well as a colour, so it does not rely on colour alone.

Do and don'tCopy Anchor Link

• Do use these for a short list of recommendations that each open somewhere else. On the Recommendations page itself, the queue uses its own QueueRow.
• Do keep the order of parts. People compare cards by scanning the same place on each.
• Don't put buttons inside a card. The whole card is already a button, and a button inside a button is invalid HTML. Decisions are made on the Recommendations page.
• Don't use RecCard as a general card. For other content, use Card.

Where it is usedCopy Anchor Link

Both functions are defined in HomePage.jsx and exported from it for these docs. Nothing else imports them.