Skip to content
Candor UI
Start free

Screens / The app around the agent

Home dashboard

Show a person what needs them and what happened since they were last here.

For: Everyone, as the first page they see on each visit.

Markdown

See it running: the workspace app example, on sample data in your browser.

3 ways to lay it out

1. Dashboard home

Pick it when: The default for a product with figures worth watching: what needs the person first, then the numbers, then what happened. A report people study is the reports and dashboards screen; this is the page they glance at.

A greeting with when the data was read, the needs-you line under it, a row of stat cards, a score ring beside its subscore tiles, and the activity below.
  • Page headerFreeThe greeting and where the person is, with the freshness stamp in its actions.
  • Freshness stampProWhen the figures were read, or that they never were.
  • Needs you lineProOne sentence: how many things need the person, linked to them; nothing to do, only when it's known; and when the count couldn't be checked, why.
  • Stat cardProOne figure each: its value, its change against a named period and a small trend; a figure that couldn't be computed says why.
  • Score ringProA score out of its maximum, saying when it was computed and from what, with any projection drawn apart.
  • Subscore cardProThe parts of the score as tiles, each with its tone in a word and its findings counted.
  • Timeline itemProOne thing that happened, with who did it and when.
  • Dashboard gridProLays the cards out by the page's own width.
Install dashboard home

Pro and Premium items need a licence key; free ones install as they are.

2. Quiet home

Pick it when: A product with little to measure, or a person who only acts on requests: say what needs them and what happened, nothing more.

A greeting, the needs-you line, and the activity since the last visit as one list.
  • Page headerFreeThe greeting and where the person is.
  • Needs you lineProOne sentence: how many things need the person, linked to them, or why it couldn't be checked.
  • Timeline itemProOne thing that happened, with who did it and when.
Install quiet home

Pro and Premium items need a licence key; free ones install as they are.

3. Phone column

Pick it when: Narrow screens: one column, read from the top, with the places on a tab bar.

One column: the needs-you line, the figures two by two, the score, then the activity, over a tab bar.
  • Needs you lineProThe first thing read: how many things need the person, or why it couldn't be checked.
  • Stat cardProThe figures, two by two.
  • Score ringProThe score, saying when it was computed and from what.
  • Timeline itemProWhat happened, newest first.
  • Tab barProThe places at the bottom of the screen, an urgent count read in the name.
Install phone column

Pro and Premium items need a licence key; free ones install as they are.

Rules that matter most here

  • Unknown stays unknown

    The needs-you line says when it couldn't check, never "nothing needs you" in its place. An estimate is called an estimate, in words. A score says when it was computed and from what.

  • The agent is always named, by the app

    Each line of activity names the agent that did it, from the app's records, not from what a model wrote.

Brief for a coding agent

Paste this into the agent that builds the screen. The docs MCP server returns the same text from get_screen.

Build the home page with Candor UI: a PageHeader with a greeting and a FreshnessStamp in its actions, then NeedsYouLine, a KpiRow of StatCard figures, a ScoreRing beside a SubscoreCard of tiles, and the activity as TimelineItem rows.
This is the page people glance at on arrival; a report they study is a different screen (reports and dashboards).
Give NeedsYouLine the same count the navigation's urgent badge shows, from one source, scoped the same; when the count couldn't be checked, pass null with the reason.
Each StatCard names the period its change is against; a figure that couldn't be computed is null with why, never zero.
Say an estimate is an estimate in its label or value text, with what it's based on.
Give ScoreRing when it was computed and what it's computed from, and make its score the weighted mean of the SubscoreCard tiles' scores, each tile counting by its weight as /apps/workspace computes it: not their sum, and not a plain mean.
Name the agent on each TimelineItem from your records.
Lay a set of cards out with DashboardGrid and a minTileWidth, as /apps/workspace does for its workspace cards, so they follow the page's width; the figures sit in a KpiRow. On a phone the page is one column.

Start from the "Dashboard home" layout: A greeting with when the data was read, the needs-you line under it, a row of stat cards, a score ring beside its subscore tiles, and the activity below.
Candor items: page-header (https://candor.themethodic.com/docs/page-header.md), freshness-stamp (https://candor.themethodic.com/docs/freshness-stamp.md), needs-you-line (https://candor.themethodic.com/docs/needs-you-line.md), stat-card (https://candor.themethodic.com/docs/stat-card.md), score-ring (https://candor.themethodic.com/docs/score-ring.md), subscore-card (https://candor.themethodic.com/docs/subscore-card.md), timeline-item (https://candor.themethodic.com/docs/timeline-item.md), dashboard-grid (https://candor.themethodic.com/docs/dashboard-grid.md).
Install: npx candor-ui add page-header freshness-stamp needs-you-line stat-card score-ring subscore-card timeline-item dashboard-grid
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.