The trust gate. Shows what the agent wants, why, and the exact scopes it will use — before any side effect.
Included in the single kansho full pack. Components are not offered as separate installs.
Demo outcome: pending
Demo outcome: pending
Demo outcome: pending
This page is the canonical destination for these components. All ship in the single Kansho pack.
components/agent/approval-actions.tsxcomponents/agent/approval-card-base.tsxcomponents/agent/approval-actions.tsxRenders a compact row of approval actions from caller-supplied definitions.
Use as the footer of an approval or permission card when each decision is already represented by a callback.
components/agent/approval-actions.tsx has a representative live example in the "Medium risk — file write" section on /components/permission-request.
Actions support primary, secondary, ghost, and destructive variants plus wired, disabled-preview, and empty sets.
ApprovalActions accepts actions with id, label, optional variant, and optional onClick, plus className, staticPreview, and previewLabel.
Direct imports are React, Button, and cn.
Each action is a native button; static-preview actions are disabled rather than pretending to mutate state.
It does not coordinate decisions, pending state, confirmation, or error feedback; the owning card or host must do so.
Source: components/agent/approval-actions.tsx.
components/agent/approval-actions.tsx is documented at /components/permission-request and installs only through the single Kansho full pack; no individual component install is offered.
components/agent/approval-card-base.tsxProvides the shared visual structure for approval and permission cards.
Use to compose a header, summary, details, and footer when a specialised approval component is not appropriate.
components/agent/approval-card-base.tsx has a representative live example in the "Medium risk — file write" section on /components/permission-request.
Its meaningful configurations are optional icon, summary, details, and footer regions; it has no internal decision state.
ApprovalCardBase accepts headerIcon, required header, optional summary, details, footer, and className.
Direct imports are React and cn.
It adds no dialog, alert, or form semantics; supplied headings and controls retain their own semantics.
This is layout only and does not enforce focus order, action wiring, or approval-state transitions.
Source: components/agent/approval-card-base.tsx.
components/agent/approval-card-base.tsx is documented at /components/permission-request and installs only through the single Kansho full pack; no individual component install is offered.
components/agent/permission-request.tsxPresents requested scopes, rationale, risk, and permission decisions in a shared approval card.
Use at a permission boundary only when the host can handle approve, deny, always-allow, and optional edit outcomes.
components/agent/permission-request.tsx has a representative live example in the "Medium risk — file write" section on /components/permission-request.
Risk is low, medium, or high; scopes may include detail; actions may be wired or intentionally disabled with staticPreview.
PermissionRequest accepts title, rationale, scopes, risk, staticPreview, approve, deny, always-allow and edit callbacks, and className.
Direct imports are React, Lucide icons, ApprovalActions, ApprovalCardBase, Tag, and cn.
Decision actions use native buttons and static previews disable them so no false interaction is offered.
It does not enforce policy, submit decisions, show pending/error results, or create an audit record; the host owns the full gate lifecycle.
Source: components/agent/permission-request.tsx.
components/agent/permission-request.tsx is documented at /components/permission-request and installs only through the single Kansho full pack; no individual component install is offered.