Canvas Design System
Main Site Tokens

Agent Check

The rules an AI result was held to, each with its verdict and its evidence: passed, worth a look, or failed.

When to Use

Use when: The AI checked its own work against named rules and the person should see the verdicts before they trust it: the review pane of a generated agenda (fits the time, breaks every 90 minutes, works for the group size), the checks a recap passed before it can be shared. Name the rule in the title and put the evidence in the detail.
Don't use when: It is form validation (the field's own error), a to-do list the person works through (Checklist and the task checklist), or the steps a run took rather than the rules it met (Agent Steps).

Variants

Verdicts

Each check is pass, warn or fail. Warn is for a rule that holds but deserves a second look; fail is a rule the result breaks.

  • Passed: Fits 2 hours

    1h 55m, inside the 12% allowance. No stretch over 90 minutes without a break.

  • Worth a look: Works for 12 people

    Two Truths and a Bet lists "any size". Fine, but it runs long past 15.

  • Failed: Serves the outcome

    The decision has 8 minutes. Choosing 3 of 12 with 12 people needs about 24.

  • Passed: Materials

    A pre-read, and notes for every item.

<?= ws_agent_check([
    ['title' => 'Fits 2 hours', 'state' => 'pass', 'detail' => '1h 55m, inside the 12% allowance.'],
    ['title' => 'Works for 12 people', 'state' => 'warn', 'detail' => 'Two Truths and a Bet runs long past 15.'],
    ['title' => 'Serves the outcome', 'state' => 'fail', 'detail' => 'The decision has 8 minutes; it needs about 24.'],
], ['label' => 'Checks this agenda was held to']) ?>

States

VerdictLooksSays
passA ticked circle in green"Passed:"
warnA triangle in amber"Worth a look:"
failAn exclamation circle in red"Failed:"

Options

OptionTypeDefaultPurpose
$checksarrayEach: title, state (pass | warn | fail), detail
labelstring''The list's accessible name, when no heading above it names it
id / class / attrsstring / string / arrayElement id, classes and attributes

Accessibility

ConcernBehavior
StructureA list, named by label when you pass one; otherwise put a heading above it.
Verdict in wordsEach check starts with visually hidden words for its verdict ("Passed:", "Worth a look:", "Failed:"), and each verdict has its own glyph shape, so nothing rests on colour.
Glyphsaria-hidden; green, amber and red glyphs each clear 3:1 on white.

Tokens

TokenUsed for
--color-success-dark / --color-warning-darker / --color-error-darkThe verdict glyphs
--bg-surface / --card-border / --card-radiusThe list's surface, matched to the cards around it
--gray-100The rule between checks

CSS Classes

ClassPurpose
.ws-agent-checkThe list
.ws-agent-check__itemOne check, --pass / --warn / --fail
.ws-agent-check__glyphThe verdict glyph
.ws-agent-check__title / __detailThe rule and its evidence

Files

FilePurpose
includes/components/helpers.phpws_agent_check() helper
includes/components/agent-check.phpTemplate
includes/components/components.cssStyles, in the agent components section