Guidance Card

For development, import GuidanceCard from @servicetitan/anvil2-ai-kit. For design, find it in the AI Kit Web Component Library file.

Options

The Guidance Card supports four lifecycle states, single and table change sections, and an optional linked reference.

States

default shows selectable diffs with Accept, Edit, and Reject actions. accepted, rejected, and skipped collapse the same content into a read-only disclosure that starts closed — expand it to review what was suggested.

Change Sections

A change section is either single — one or more scalar diff rows — or table — one or more labeled line-item tables. Combine both types, in any order, within changeSections to build a mixed review.

Reference Link

referenceHref turns the reference label into a link that opens the related estimate or invoice in a new tab. Omit it to render the label as plain text.

Behavior

In the default state, every change starts selected; the card tracks its own selection from there and disables its footer actions once everything is deselected.

Selection

When a section has more than one selectable change, each row starts checked and gets its own checkbox — uncheck a row to exclude it before accepting. A lone change omits the checkbox entirely; Accept always applies to it.

Actions

Accept and Edit are enabled by default — every change starts selected — and disable only once every change is deselected. Reject is always available and needs no selection. Accept and Edit each receive the ids of the currently selected changes and table rows.

Usage Guidelines

When to Use

Use the Guidance Card when:

Reviewing changes the agent proposes – The agent suggests changes to a record, such as an estimate or invoice, and the user accepts, edits, or rejects them.
Accepting only some changes – A section holds several changes. Each row gets a checkbox so the user can exclude a change before accepting.
Reviewing line-item changes – Proposed changes affect rows in a list of items. Use a table change section, alone or combined with single change sections.
Recording the outcome of a review – After the user acts, show the accepted, rejected, or skipped state as a read-only summary the user can expand.

When not to use

Avoid using the Guidance Card for:

Showing a change without review actions – Use the Diff Value instead.
Offering follow-up prompts after an agent response – Use the Suggestion instead.

Keyboard Interaction

Users can navigate, select, and act on the Guidance Card using standard keyboard controls.

Key	Description
Tab	Moves focus among checkboxes, the reference link, and footer actions
Space	Toggles the focused checkbox
Enter / Space	Activates the focused reference link or footer action

Code

Implementation
GuidanceCard Props
GuidanceChange

Common Examples

To use the GuidanceCard, pass a referenceLabel and ordered changeSections. Wire onApply, onEdit, and onDismiss to handle Accept, Edit, and Reject.

import { GuidanceCard } from "@servicetitan/anvil2-ai-kit";

function ExampleComponent() {
  return (
    <GuidanceCard
      referenceLabel="Estimate #12345"
      changeSections={[
        {
          type: "single",
          changes: [
            {
              id: "labor-hours",
              label: "Labor hours",
              from: "6.5h",
              to: "8.0h",
            },
          ],
        },
      ]}
      onApply={(ids) => apply(ids)}
      onEdit={(ids) => edit(ids)}
      onDismiss={() => reject()}
    />
  );
}

States

state is "default", "accepted", "rejected", or "skipped". Non-default states collapse the body unless you set defaultExpanded. Accepted state can filter visible rows through appliedChangeIds.

Selection

Multiple single changes each get a checkbox. A single change has no checkbox; Accept applies to that item.

Change sections

Use type: "single" for scalar diffs and type: "table" for labeled line-item tables. Table cells may be a string, { type: "text", value }, { type: "diff", from, to }, or { type: "addition", value }.

Reference link

Pass referenceHref to make the reference label a link.

Actions

Accept and Edit receive the currently selected single-change and table-row ids. Reject calls onDismiss with no selection.

Internationalization

GuidanceCard owns these localized strings:

ai-kit.guidanceCard.suggestedChanges
ai-kit.guidanceCard.suggestionsAccepted
ai-kit.guidanceCard.suggestionsRejected
ai-kit.guidanceCard.suggestionsSkipped
ai-kit.guidanceCard.accept
ai-kit.guidanceCard.edit
ai-kit.guidanceCard.reject
ai-kit.guidanceCard.reasonPrefix

Localize referenceLabel, change labels, reasons, and table headers before passing them. Mount AiKitIntlProvider inside CartoTheme to switch the built-in strings.

React Accessibility

Title text reflects the current state.
Multiple changes expose selectable rows. A single change applies without a checkbox.
Table groups use the kit table selection semantics, including localized select-all and select-row labels.

<GuidanceCard
  referenceLabel="Estimate #12345"
  changeSections={sections}
  onApply={apply}
  onEdit={edit}
  onDismiss={reject}
/>

`GuidanceCard` Props

The GuidanceCard accepts the following props.

GuidanceChangeSection[]

required

Ordered body sections of single changes or table groups.

string

required

Reference shown under the title, such as "Estimate #12345".

string[]

Accepted state: ids of applied single changes and table rows. Filters visible content.

string

Class merged onto the root element.

boolean

default:"false"

Whether a non-default state starts expanded.

(acceptedChangeIds: string[]) => void

Called when Accept is pressed with the current selection.

() => void

Called when Reject is pressed.

(acceptedChangeIds: string[]) => void

Called when Edit is pressed with the current selection.

string

Optional href for the reference label.

"default" | "accepted" | "rejected" | "skipped"

default:"default"

Card lifecycle state.

const change: GuidanceChange = {
  id: "labor-hours",
  label: "Labor hours",
  from: "6.5h",
  to: "8.0h",
  reason: "Job ran longer than estimated.",
};

`GuidanceChange`

string

required

Stable identity used for selection and accepted-state filtering.

string

required

Eyebrow label for the change.

string | null

Previous value. Omit both from and to to hide the diff. Explicit null still shows empty or removed.

string

Supporting copy shown in the reason callout.

string | null

Proposed value.

Concepts & Guidelines

Anvil2

Resources

Guidance Card - Web

Options

States

Change Sections

Reference Link

Behavior

Selection

Actions

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

States

Selection

Change sections

Reference link

Actions

Internationalization

React Accessibility

`GuidanceCard` Props

`GuidanceChange`

​Options

​States

​Change Sections

​Reference Link

​Behavior

​Selection

​Actions

​Usage Guidelines

​When to Use

​When not to use

​Keyboard Interaction

​Code

​Common Examples

​States

​Selection

​Change sections

​Reference link

​Actions

​Internationalization

​React Accessibility

​GuidanceCard Props

​GuidanceChange

Options

States

Change Sections

Reference Link

Behavior

Selection

Actions

Usage Guidelines

When to Use

When not to use

Keyboard Interaction

Code

Common Examples

States

Selection

Change sections

Reference link

Actions

Internationalization

React Accessibility

`GuidanceCard` Props

`GuidanceChange`