Agent Steps and Confirm

Code

<AgentSteps  steps={steps}  redactKeys={["token", "password"]}  onRetry={(id) => retry(id)}  renderConfirm={() => (    <AgentConfirm      changes={changes}      summary="I will rename 2 tags and delete 1 duplicate."      onApply={async (ids) => api.apply(ids)}      onReject={async (reason) => api.reject(reason)}    />  )}/>

AI Agents · beta

Live examples and controls: Agent Steps and Confirm in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/agent-steps.json

Two pieces for agentic features. AgentSteps shows what the agent did or plans to do, one tool call per row. AgentConfirm stops before the change lands: it shows each proposed change as a diff and waits for a person to apply or reject. Neither runs anything itself.

When to useCopy Anchor Link

• An assistant that calls tools and you want the run to be inspectable.
• Any agent action that edits data, sends messages or spends money and needs a yes first.

When not to useCopy Anchor Link

• A queue of requests from many people to approve: use ApprovalQueue.
• History of finished runs: use RunHistory.
• Editing a workflow by hand: use StepEditor.

ImportCopy Anchor Link

import { AgentSteps, AgentConfirm } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<AgentSteps
  steps={steps}
  redactKeys={["token", "password"]}
  onRetry={(id) => retry(id)}
  renderConfirm={() => (
    <AgentConfirm
      changes={changes}
      summary="I will rename 2 tags and delete 1 duplicate."
      onApply={async (ids) => api.apply(ids)}
      onReject={async (reason) => api.reject(reason)}
    />
  )}
/>

APICopy Anchor Link

AgentStepCopy Anchor Link

id, label, tool?, status (pending, running, awaiting, done, error, skipped), args?, result? (text or a JSON string), resultLanguage?, error?, durationMs?.

AgentStepsCopy Anchor Link

AgentChangeCopy Anchor Link

id, title, target?, description?, before?, after?, risk? (low, medium, high). No before means a new item, no after means a deletion.

AgentConfirmCopy Anchor Link

AgentDiff on its own takes before, after and context.

ExamplesCopy Anchor Link

• Read only run log: AgentSteps without renderConfirm.
• Destructive change: mark risk: "high", and Apply stays disabled until the person ticks the acknowledgement.

AccessibilityCopy Anchor Link

• The run summary is a polite live region: "Waiting for you", "Failed", "Done".
• Each step is a disclosure button with its status in text, not only an icon.
• Diff lines carry + and - marks, so colour is not the only signal.
• Reject opens a dialog that traps focus and returns it on close.

RTL and i18nCopy Anchor Link

• English and Arabic through useOptionalNasaq(), overridable with labels.
• Tool names, arguments, results and diffs stay left to right; the surrounding text follows the page direction.
• Progress arrows and chevrons flip in RTL.

Styling and tokensCopy Anchor Link

Status uses the --nq-success, --nq-warning, --nq-danger and --nq-accent families. Diff rows use the same tints as VersionHistory.

Do / Don'tCopy Anchor Link

• Do let the person leave single changes out.
• Do mask secrets with redactKeys before they reach the screen.
• Don't apply anything before onApply is called. Confirm is the only gate.
• Don't hide the diff for high risk changes.

RelatedCopy Anchor Link

ApprovalQueue, RunHistory, StepEditor, AiCitedAnswer.