Coach message

In context

Hero card

When the advice is built on a visual — a trend, a ranking, a photo — pass media and a headline to get the hero card: the proof on top, the takeaway and the figures under it. This is the shape most coach messages should take; a wall of text reads as generic, a chart with a one-line takeaway reads as about this shop.

The media is a slot — you own it (a chart, a table, an Image); the system doesn't ship a chart library. Render it full-bleed; the card clips it to the rounded corners.

Full screen

Set fullScreen to expand the hero into a detail view that fills the screen — bigger media, the full breakdown, actions pinned to the bottom. Use it when the user taps into a coach card for the whole story.

Purpose

Coach message delivers a single, concrete suggestion the user can act on, grounded in their own data. It's the payoff for capture: the reason a shop owner bothers to log sales is to get advice like this back.

Anatomy

• Avatar — a small brand mark that identifies this as the coach speaking.
• Title (optional) — a short framing like "Today's idea" or "This week".
• Media (optional, hero) — a chart, table, or image rendered full-bleed on top. Turns the card into a hero card. You own the media; the system clips it to the corners.
• Headline (optional, hero) — the big takeaway in one line ("Krapow is carrying the week.").
• Message — the suggestion, specific and grounded. One idea, not a list.
• Figures (optional) — a strip of the user's own numbers the advice stands on, each tinted by trend. The proof under the suggestion — what keeps the coach from feeling generic.
• Proof line (optional, hero) — a one-line alternative to the figures strip via proof={{ value, detail }}: the value tinted brand, the detail as plain prose beside it ("฿1,240 over 4 days · up 63%.").
• Actions (optional) — a primary next step (give it an actionIcon to lead with a glyph). The low-emphasis second action renders as a soft aqua suggestion chip on hero cards — a dot, an italic label, a chevron — inviting a tangent without competing with the primary.

Code

import { CoachMessage } from '@daytwo/components'

<CoachMessage
title="Today's idea"
message="Your tea sales jump on rainy afternoons. Rain's forecast at 3pm — brew an extra batch by 2:30."
stats={[
  { label: 'Cash on hand', value: 'Ks 312,000' },
  { label: 'Today', value: '+Ks 124,000', trend: 'up' },
  { label: 'Tea · rainy days', value: '+38%', trend: 'up' },
]}
actionLabel="Show me the numbers"
onAction={openBreakdown}
secondaryActionLabel="Ask"
onSecondaryAction={openChat}
/>

The stats are how the coach proves it's looking at this shop's numbers, not a template. trend: 'up' | 'down' | 'flat' tints the value green / red / neutral.

For a hero card, add media and a headline; add fullScreen to expand it into a detail view:

<CoachMessage
media={<SalesChart series={krapowVsCharcoal} />}
headline="Krapow is carrying the week."
proof={{ value: '฿1,240', detail: 'over 4 days · up 63%.' }}
actionLabel="See the buy run"
actionIcon={<ShoppingCart />}
secondaryActionLabel="what to restock"
/>

On a hero card the chart carries the context, so the coach tag is dropped unless you pass a title. Use proof for a tight one-liner under the headline, or stats when you want the full figures strip.

When to use

• When you have a suggestion grounded in the user's actual data that could help them make or save money.
• To turn captured data into a visible, valuable payoff.

When NOT to use

• When the advice is generic. One irrelevant suggestion ("invite 3 past customers") broke trust every time in user interviews. If you can't ground it in the user's numbers, show nothing.
• For system messages or errors — use an alert or inline error, not the coach.
• To stack five tips at once — one concrete idea beats a wall of advice the user won't read.

The correct scenario

After a week of logged sales, the coach notices a real pattern in the user's own data and surfaces one timely, specific action tied to it. The user feels understood, acts on it, and trusts the next suggestion more.

Anti-patterns

Edge cases

Tokens used