A React UI kit for supervising AI agents
90 components for the screens where a person approves what an agent wants to do, watches it work, reviews its changes and takes back control. Light, dark and solid themes, under the MIT licence.
-
Investigate the failed deploy
read_logs1.8s,run_testsretried once - Install the missing dependency
- Patch config and verify
Run npm install zod@3 on web/package.json?
server/validate.ts imports zod, but it is missing from dependencies, so the production build fails.
A simulated run. Nothing is installed, edited or deployed. Try Allow, Deny, or hold the stop button.
The questions a supervision screen has to answer
Most agent interface work goes into chat. Once an agent can run commands, edit files and spend money, the harder problem is control and trust. Each question below has a component that owns the answer.
- What exactly is it about to do, and how risky is that?
- ApprovalPrompt asks about one specific action, never "continue?". High-risk actions can't be set to always allow.
- What did it actually do?
- RunTimeline and ToolCallCard show every tool call, its input and its errors, including the ones it retried.
- Do I accept this change?
- DiffReview takes a decision per hunk, by mouse or keyboard, before anything lands.
- What is waiting on me?
- NeedsYouInbox gathers everything blocked on a person across agents. FleetSky shows many agents at once.
- What does it plan to do?
- PlanEditor lets you reorder, edit, remove and add steps before anything runs.
- What does it need to know?
- QuestionCard is for information rather than permission: options when the agent has them, free text when it doesn't.
- How sure is it?
- ConfidenceMeter gives a range in words with reasons, never a falsely precise percentage.
- Can I stop it, or undo what it did?
- KillSwitch stops on a one-second hold. CheckpointRewind shows what a rollback undoes before you confirm.
- What have I already allowed?
- PermissionLedger lists every standing permission, how often it has been used, and a way to revoke it.
- Is it finished?
- AgentHandoffBanner marks the point where the agent hands control back, with its summary and next actions.
Made to fit into another design system
Themed with tokens
Every colour, radius, shadow and font is a --cr-* CSS variable from one token source. Override a handful to rebrand it. Light and dark ship together, and every glass layer turns solid when someone asks their system for less transparency or more contrast.
Plain CSS, no runtime
One stylesheet built from co-located CSS files. Tested with Vite and with the Next.js App Router, where every component is rendered by the server. Class names such as .cr-approval__actions are a stable, public API, with variants in data-* attributes.
Pay for what you import
The package ships one module per component, so bundlers drop the rest. Importing only ApprovalPrompt adds 1.87 kB of Creance code, minified and compressed.
Native first, Radix where it is hard
Checkboxes, radios, switches, selects and progress bars are the browser's own elements. Ten Radix packages handle the widgets with difficult focus and dismissal: dialogs, menus, tabs, popovers, sliders, toasts.
Everything works by keyboard
Shortcuts such as A to allow and D to deny only fire while focus is inside the component, and never with Ctrl, Alt or ⌘, so the kit doesn't take over page keys.
Status never relies on colour
Each status and risk level has its own shape, an icon and a word. Announcements are limited to the moments that need a person, so a long run doesn't flood a screen reader.
90 components, each one live and editable
The general-purpose set covers the same ground as Vercel's Geist component list, built in Creance's own style. The agent components sit on top of it. Every name opens that component on the Components page, running from the real library with code you can edit.
- Actions 9
- Button CopyButton IconButton LoadMoreButton ShowMore SplitButton TextWithCopy Toggle ToggleGroup
- Forms 17
- Calendar Checkbox Choicebox ClearableInput Combobox Feedback Field Input MultiSelect Radio RadioGroup SearchInput Select Slider Switch Textarea ThemeSwitcher
- Navigation 9
- Breadcrumbs Collapse CommandMenu ContextMenu DotsMenu Menu Pagination Scroller Tabs
- Data display 17
- Avatar Badge Card Code Description EmptyState Entity FileTree Gauge JsonView Kbd MiddleTruncate ProgressBar Separator Snippet StatusDot Table
- Media 3
- BrowserFrame PhoneFrame Video
Where version 0.2.0 stands
The code is complete and passes its checks. It is not on npm yet, no real agent is connected, and a manual screen-reader pass has not been done.