MessageActionCard

Suggested action card composed inside a MessageItem body for commit-style workflows.

Preview#

AT
Atlasagent2:27 PM
Create private channel #release-review
Description
Coordinate the final release review.
People
Ada, Will
Agents
Atlas
Reason
You asked for a private space for the release review.

Anatomy#

import {
  MessageActionCard,
  MessageActionCardActions,
  MessageActionCardActionsNote,
  MessageActionCardCollapseTrigger,
  MessageActionCardContent,
  MessageActionCardHeader,
  MessageActionCardHeaderIcon,
  MessageActionCardHeaderDescription,
  MessageActionCardHeaderTitle,
  MessageActionCardHint,
  MessageActionCardHintLabel,
  MessageActionCardNotice,
  MessageActionCardProperties,
  MessageActionCardProperty,
  MessageActionCardPropertyLabel,
  MessageActionCardPropertyValue,
  MessageActionCardScope,
  MessageActionCardScopeDescription,
  MessageActionCardScopeList,
  MessageActionCardScopeListLabel,
  MessageActionCardScopeListViewport,
  MessageActionCardScopeName,
  MessageActionCardStatus,
} from "raft-ui";

<MessageActionCard defaultOpen>
  <MessageActionCardHeader>
    <MessageActionCardHeaderIcon />
    <MessageActionCardHeaderTitle>
      <MessageActionCardHeaderDescription />
    </MessageActionCardHeaderTitle>
    <MessageActionCardStatus />
    <MessageActionCardCollapseTrigger aria-label="Show or hide details" />
  </MessageActionCardHeader>
  <MessageActionCardContent>
    <MessageActionCardNotice />
    <MessageActionCardProperties>
      <MessageActionCardProperty>
        <MessageActionCardPropertyLabel />
        <MessageActionCardPropertyValue />
      </MessageActionCardProperty>
    </MessageActionCardProperties>
    <MessageActionCardHintLabel>Reason</MessageActionCardHintLabel>
    <MessageActionCardHint />
    <MessageActionCardScopeList>
      <MessageActionCardScopeListLabel />
      <MessageActionCardScopeListViewport aria-label="Permissions">
        <MessageActionCardScope>
          <MessageActionCardScopeName />
          <MessageActionCardScopeDescription />
        </MessageActionCardScope>
      </MessageActionCardScopeListViewport>
    </MessageActionCardScopeList>
    <MessageActionCardActions>
      <MessageActionCardActionsNote />
    </MessageActionCardActions>
  </MessageActionCardContent>
</MessageActionCard>

Usage#

Review pattern#

Creating a channel, creating an agent and adding members open the regular dialog with the agent's values filled in, so the person can change anything before it is created. The primary button is therefore "Review", not the action itself.

AT
Atlasagent2:31 PM
Create private channel #release-review
Description
Coordinate the final release review.
People
Ada, Will
Agents
Atlas
Reason
You asked for a private space for the release review.
Create agent @release-bot
Description
Drafts release notes from merged pull requests.
Suggested computer
build-mac-01
Reason
You asked for someone to write release notes every Friday.
Add 3 members to #general
People
Ada, Will
Agents
Lumen

Approve pattern#

App login, install, registration, update and owner recovery run in one click, so the primary button names the action. Permissions sit in a small scrolling area so a long list never stretches the card; a standing notice is neutral, never a warning colour.

AT
Atlasagent2:42 PM
Approve Linear for @lumen
Sends to @lumen only. Cannot send chat as you, speak as the agent, read messages, or take actions.
App
Linear
Agent
@lumen
Reason
I need to file the issues you listed in this morning's triage.
Permissions (4)
openid
Signs you in with Raft and issues a stable identity token. Authentication only.
profile
Reads your basic profile fields. No access to messages, files, or agents.
agent:read
Reads the IDs, handles, names and avatars of agents in the Server you authorize. Cannot send messages.
agent:event:write
Sends structured event messages to the one agent you authorize.
Install Lens for @lumen
Installs the app for this whole Server. Only an owner or admin can do this.
App
Lens
Agent
@lumen
Permissions (2)
openid
Signs you in with Raft and issues a stable identity token. Authentication only.
profile
Reads your basic profile fields. No access to messages, files, or agents.
Register app Release Notes
The requesting agent becomes the app's owner and can rotate, update or transfer it.
Client key
release-notes
Redirect URL
https://notes.example.com/oauth/callback
Permissions (2)
openid
Signs you in with Raft and issues a stable identity token. Authentication only.
email
Reads your verified Raft account email address. No access to messages, files, or agents.
Update app release-notes
Client key
release-notes
New name
Release Notes v2
Recover release-notes for @atlas
Admin recovery. It is refused while the app still has an active owner.
Client key
release-notes
New owner
@atlas

States#

Paused and confirm-again cards stay open because they still wait on the reader. Done, declined and view-only cards fold to their header with defaultOpen=false; the header toggle opens them again. An open card's note left of the buttons says why it needs you now or why it is paused; a folded card says what happened, or why you cannot act, under its title, so the line shows while folded. A failed click is temporary: the product shows a toast and the card stays as it was, ready to retry.

AT
Atlasagent3:02 PM
Create private channel #release-review
Description
Coordinate the final release review.
People
Ada, Will
Agents
Atlas
Reason
You asked for a private space for the release review.
Create private channel #release-reviewPaused
Description
Coordinate the final release review.
People
Ada, Will
Agents
Atlas
Reason
You asked for a private space for the release review.
Paused while this channel is being converted to a Joint channel.
Create private channel #release-reviewConfirm again
Description
Coordinate the final release review.
People
Ada, Will
Agents
Atlas
Reason
You asked for a private space for the release review.
This channel became a Joint channel. Confirm again to continue.
Create private channel #release-reviewCreated by Ada → #release-reviewDone
Create private channel #release-reviewDeclined by Ada. Nothing was changed.Declined
Create private channel #release-reviewJoin this channel to act on this card.View only

API#WIP

MessageActionCard#

...props
useRender.ComponentProps<"div">
Suggested-action card root. Compose inside MessageItemBody; execution state stays consumer-owned.
defaultOpen
boolean
Start open (default) or folded to the header. Fold resolved and view-only cards.
open / onOpenChange
boolean / (open: boolean) => void
Controlled fold state. The content height animates; reduced motion skips it.

Header, status, fold and notes#

MessageActionCardHeaderIcon
useRender.ComponentProps<"span">
Leading type icon box in the header band. Pass one lucide icon; without children it shows a generic action icon (Zap).
MessageActionCardHeaderTitle
useRender.ComponentProps<"span">
Title text; takes the remaining width so status and toggle sit at the end.
MessageActionCardHeaderDescription
useRender.ComponentProps<"span">
A line under the title, placed inside MessageActionCardHeaderTitle: what happened on a Done or Declined card, or why you cannot act on a View only one. It stays visible while the card is folded.
MessageActionCardStatus
BadgeProps
State label, written as plain text led by a square pixel in the variant's colour.
MessageActionCardCollapseTrigger
Collapsible.Trigger props & { "aria-label": string }
Chevron toggle that folds the card to its header and back.
MessageActionCardScopeListViewport
useRender.ComponentProps<"div"> & { "aria-label": string }
Scroll area for the scopes; the cap cuts through the third row. aria-label is required; it is a Tab stop only while the list overflows.
MessageActionCardActionsNote
useRender.ComponentProps<"div">
Left side of the actions row on an open card: why it needs you now (Confirm again) or why it is paused. A card that folds by default puts its line in MessageActionCardHeaderDescription instead.

MessageActionCardHeader#

...props
useRender.ComponentProps<"div">
Outer title row. Compose the action title and any trailing status here.

MessageActionCardHeaderStatus#

...props
useRender.ComponentProps<"span">
Trailing header region. Use render to apply its alignment to a caller-owned badge or status.

MessageActionCardContent#

...props
useRender.ComponentProps<"div">
White inner content stack for details, notice, actions, and completion.

MessageActionCardProperties#

...props
useRender.ComponentProps<"dl">
Optional aligned definition list for compact action properties.

MessageActionCardProperty#

...props
useRender.ComponentProps<"div">
Semantic label/value pair in the shared Properties grid; it does not create its own surface.

MessageActionCardPropertyLabel#

...props
useRender.ComponentProps<"dt">
Muted metadata label with a shared column width.

MessageActionCardPropertyValue#

...props
useRender.ComponentProps<"dd">
Metadata value that wraps without widening the card.

MessageActionCardScopeList#

...props
useRender.ComponentProps<"div">
Optional named scope section rendered directly in the content stack.

MessageActionCardScopeListLabel#

...props
useRender.ComponentProps<"div">
Heading for a scope list.

MessageActionCardScope#

...props
useRender.ComponentProps<"div">
One bordered scope explanation block.

MessageActionCardScopeName#

...props
useRender.ComponentProps<"div">
Scope identifier.

MessageActionCardScopeDescription#

...props
useRender.ComponentProps<"div">
Scope capability explanation.

MessageActionCardHintLabel#

...props
useRender.ComponentProps<"div">
Label above the agent's reason, e.g. Reason.

MessageActionCardHint#

...props
useRender.ComponentProps<"div">
The agent's own reason for the card, shown as an italic quote under MessageActionCardHintLabel.

MessageActionCardNotice#

...props
useRender.ComponentProps<"div">
Raft's standing note about what the action does or who may run it. A tinted block with a leading icon that opens the content, above the properties; only for the cards that need one. The agent's own reason goes in MessageActionCardHint, not a notice.
icon
ReactNode
Replaces the default leading info icon.

MessageActionCardActions#

...props
useRender.ComponentProps<"div">
Pre-commit action area. Buttons and dialog state stay consumer-owned.

MessageActionCardCompletion#

...props
useRender.ComponentProps<"div">
Legacy result line at the end of the content. Prefer MessageActionCardHeaderDescription, which stays visible when the card is folded.