Result Card

Usage

import { ResultCard } from "@tulipfarm/sprout/result-card";

<ResultCard
  title="Investor pitch"
  kind="File"
  status="Saved in Google Slides"
  state="success"
  apps={[
    {
      brand: "google-slides",
      name: "Google Slides",
      actions: [
        { label: "Created the investor pitch presentation", state: "completed" },
        { label: "Added the two pitch slides", state: "completed" },
      ],
    },
  ]}
  action={{ label: "View slides", onClick: openInCanvas }}
/>

• kind: "File", "Plan","Workflow", "Action","Calendar", "Table","Activity", "Agent", or"Skill". It shows before the status and names the card “Kind: title”.
• status: short text, such as “Waiting for review” or “Action not confirmed”.
• action: one outline button. It sits beside the text when the card is at least 28rem wide, and below it when narrower. Passdisabled to turn it off.
• icon: shown in a tile when apps is empty, such as a file, table, plan, or workflow icon.
• children: extra content under the header, such as plan progress and controls.

States

• "default": a muted status.
• "loading": a spinner and aria-busy; the action is disabled while the card checks.
• "running": a spinner and aria-busy; the action stays available.
• "disabled": the action and app tiles are disabled.
• "error": a red status with a warning icon.
• "success": a green status with a check.

Apps used

Each app is a tile. Entries with the same brand (or the same name when brand is null) merge into one tile. Two tiles show; the rest fold into a “+N” tile. A tile opens its actions after 800ms of hover, or on click, Enter, or Space. An app with brand: null shows a plug icon.

Actions by app

import { ResultAppActions } from "@tulipfarm/sprout/result-card";

<h3>Actions by app</h3>
<ResultAppActions apps={result.apps} />

// One app, without its name above the list
<ResultAppActions apps={[slackApp]} showAppNames={false} />

A check marks "completed". Other states are spelled out: “Pending:”, “In progress:”, “Failed:” (red), “Unconfirmed:”, “Blocked:”, “Cancelled:”, and “Skipped:”. An app with no actions says “No action details were recorded.”

In TulipFarm

Each sample below uses local data shaped like a TulipFarm screen. Pick an outcome to see how its status, state, and app actions change.

Accessibility

The card is a section named “Kind: title”, with the title as anh3. The status is a live status, so changes are announced. Busy cards set aria-busy. App tiles sit in a group named “Apps used”; each is a button named “Slack actions” or “3 more apps”. Opening one by keyboard moves focus into the panel; Escape closes it and returns focus. Icons are hidden from assistive tech, and completed actions read “Completed:”.

On touch screens the action button and tiles grow to 44px. Status colors fade in 180ms; with reduced motion the fade and spinner stop.

Theme tokens

The card uses --sprout-surface,--sprout-input for its border, --sprout-muted,--sprout-success, and --sprout-danger. App tiles use the Brand Icon tokens.