Approval Request with Blast Radius
The agent stops and asks: the effect stated before the verb, choices as radios in a fieldset so picking is separate from committing, no pre-focused Approve, and the decision left on screen afterwards.
Agent Permission Scopes
Read and write scopes separated rather than bundled, writes off by default, a required expiry, and switches that are real checkboxes with role="switch" — so the grant is toggleable by keyboard and announced as on or off.
297 lineslucide-reactAdded 13 Aug 2026Updated 11 Sept 2026
- permissions
- scopes
- consent
- switch
- security
What's included
components/permission-scope-dialog.tsx- Needs lucide-react
Works with
- React
- Next.js
- Tailwind CSS
- TypeScript
npx hoverlab add permission-scope-dialog
Or over MCP, from your editor's agent — no account needed.
License
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Was this useful?
Start a page with this section — add more, order them, and leave with the page source.
Preview
Give Retention agent access
It needs to see who is at risk, and — if you let it — act on that.
Can see
Can change
Off by default. These act without asking again.
Revocable at any time from Settings → Agents
Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.
Source
components/permission-scope-dialog.tsx
/**
* <PermissionScopeDialog> — granting an agent the tools it asked for, one
* scope at a time, with a duration.
*
* The OAuth consent screen is the closest existing pattern and it is the
* wrong one to copy wholesale: it grants forever, it bundles read with
* write, and it renders scopes as machine strings. An agent needs the same
* consent moment done better.
*
* - Read and write scopes are visually and structurally separated. Bundling
* "see your invoices" with "issue refunds" behind one switch is how a
* user grants something they would have refused.
* - Write scopes default OFF. Every default here is the least powerful
* grant that still lets the agent do something, because a default is what
* most users will accept unchanged.
* - The grant has an expiry, chosen with radios. A permission with no end
* is the one nobody remembers to revoke.
* - Each switch is a real `<input type="checkbox" role="switch">` inside a
* `<label>`, so the whole row is a hit target, the state is announced as
* on/off, and space toggles it. Switch-shaped divs with click handlers
* are the usual version and are invisible to a keyboard.
* - The confirm button's label counts what is being granted, so the last
* thing read before committing is the size of the grant.
*/
'use client'
import * as React from 'react'
import { Clock, Eye, KeyRound, PencilLine, ShieldCheck } from 'lucide-react'
export interface PermissionScope {
id: string
label: string
detail: string
/** Write scopes are grouped apart and default to off. */
write?: boolean
/** Cannot be turned off — the agent does nothing without it. */
required?: boolean
}
export interface PermissionScopeDialogProps {
agentName?: string
purpose?: string
scopes?: PermissionScope[]
durations?: string[]
className?: string
}
const DEFAULT_SCOPES: PermissionScope[] = [
{
id: 'read-accounts',
label: 'Read accounts and contacts',
detail: 'Names, plan, seat count, renewal date',
required: true,
},
{
id: 'read-usage',
label: 'Read product usage events',
detail: 'Last 90 days, aggregated per account',
},
{
id: 'read-tickets',
label: 'Read support tickets',
detail: 'Subject and status only — message bodies stay private',
},
{
id: 'write-notes',
label: 'Write notes on accounts',
detail: 'Appends to the activity log; nothing is overwritten',
write: true,
},
{
id: 'write-email',
label: 'Send email on your behalf',
detail: 'From retention@acme.com, to customers, without a second prompt',
write: true,
},
]
const DEFAULT_DURATIONS = ['This session', '7 days', '30 days']
export function PermissionScopeDialog({
agentName = 'Retention agent',
purpose = 'It needs to see who is at risk, and — if you let it — act on that.',
scopes = DEFAULT_SCOPES,
durations = DEFAULT_DURATIONS,
className = '',
}: PermissionScopeDialogProps) {
// Reads on, writes off. The default is the grant most people will accept
// without reading, so it has to be the safe one.
const [granted, setGranted] = React.useState<string[]>(
scopes.filter((s) => !s.write).map((s) => s.id),
)
const [duration, setDuration] = React.useState(durations[0] ?? '')
const reads = scopes.filter((s) => !s.write)
const writes = scopes.filter((s) => s.write)
const writeCount = writes.filter((s) => granted.includes(s.id)).length
const headingId = React.useId()
function toggle(scope: PermissionScope) {
if (scope.required) return
setGranted((list) =>
list.includes(scope.id) ? list.filter((x) => x !== scope.id) : [...list, scope.id],
)
}
return (
<div className={`flex justify-center p-6 ${className}`}>
<section
aria-labelledby={headingId}
className="w-full max-w-md overflow-hidden rounded-2xl border border-border/60 bg-card shadow-2xl"
>
{/* -- Header ----------------------------------------------------- */}
<div className="border-b border-border/60 px-5 py-4 text-center">
<span className="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<KeyRound aria-hidden className="h-5 w-5" />
</span>
<h3 id={headingId} data-stress-ignore className="mt-3 text-base font-semibold">
Give {agentName} access
</h3>
<p className="mt-1 text-sm leading-relaxed text-muted-foreground">{purpose}</p>
</div>
{/* Tall enough to show the write scopes without scrolling. A cap
that hides them defeats the block: "writes are off by default"
is only reassuring if you can see the writes. */}
<div className="max-h-[64rem] space-y-5 overflow-y-auto px-5 py-4">
<ScopeGroup
icon={<Eye aria-hidden className="h-3.5 w-3.5" />}
title="Can see"
scopes={reads}
granted={granted}
onToggle={toggle}
/>
{writes.length > 0 ? (
<ScopeGroup
icon={<PencilLine aria-hidden className="h-3.5 w-3.5" />}
title="Can change"
note="Off by default. These act without asking again."
scopes={writes}
granted={granted}
onToggle={toggle}
emphasised
/>
) : null}
{/* -- Duration -------------------------------------------------- */}
<fieldset>
<legend className="mb-2 flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground">
<Clock aria-hidden className="h-3.5 w-3.5" />
Expires after
</legend>
<div className="flex gap-2">
{durations.map((option) => (
<label
key={option}
className={`flex flex-1 cursor-pointer items-center justify-center rounded-xl border px-2 py-2 text-xs font-medium transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring ${
option === duration
? 'border-primary bg-primary/5 text-foreground'
: 'border-border/60 text-muted-foreground hover:bg-muted/50'
}`}
>
<input
type="radio"
name={`${headingId}-duration`}
value={option}
checked={option === duration}
onChange={() => setDuration(option)}
className="sr-only"
/>
{option}
</label>
))}
</div>
</fieldset>
</div>
{/* -- Commit ------------------------------------------------------ */}
<div className="space-y-2 border-t border-border/60 bg-muted/30 px-5 py-4">
<button
type="button"
className="w-full rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
>
{/* Counting the grant in the label puts the size of the decision
in the last thing read before it is made. */}
Grant {granted.length} {granted.length === 1 ? 'permission' : 'permissions'}
{writeCount > 0 ? ` — ${writeCount} that can change data` : ''}
</button>
<button
type="button"
className="w-full rounded-xl px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
>
Not now
</button>
<p className="flex items-center justify-center gap-1.5 pt-1 text-xs text-muted-foreground">
<ShieldCheck aria-hidden className="h-3.5 w-3.5" />
Revocable at any time from Settings → Agents
</p>
</div>
</section>
</div>
)
}
function ScopeGroup({
icon,
title,
note,
scopes,
granted,
onToggle,
emphasised = false,
}: {
icon: React.ReactNode
title: string
note?: string
scopes: PermissionScope[]
granted: string[]
onToggle: (scope: PermissionScope) => void
emphasised?: boolean
}) {
return (
<div>
<h4
className={`mb-1 flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider ${
emphasised ? 'text-amber-600 dark:text-amber-400' : 'text-muted-foreground'
}`}
>
{icon}
{title}
</h4>
{note ? <p className="mb-2 text-xs text-muted-foreground">{note}</p> : null}
<ul className="space-y-1">
{scopes.map((scope) => {
const on = granted.includes(scope.id)
return (
<li key={scope.id}>
<label
className={`flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring ${
scope.required ? '' : 'cursor-pointer hover:bg-muted/50'
}`}
>
<span className="min-w-0 flex-1">
<span className="flex flex-wrap items-center gap-2 text-sm font-medium">
{scope.label}
{scope.required ? (
<span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-muted-foreground">
Required
</span>
) : null}
</span>
<span className="mt-0.5 block text-xs leading-relaxed text-muted-foreground">
{scope.detail}
</span>
</span>
{/*
A checkbox with role="switch" — announced "on"/"off" rather
than "checked", toggled with space, and reachable by tab.
The visual switch is drawn from its state with peer-*, so
there is no second source of truth.
*/}
<span className="relative mt-0.5 shrink-0">
<input
type="checkbox"
role="switch"
checked={on}
disabled={scope.required}
onChange={() => onToggle(scope)}
className="peer sr-only"
/>
<span
aria-hidden
className="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"
/>
<span
aria-hidden
className="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"
/>
</span>
</label>
</li>
)
})}
</ul>
</div>
)
}
Before you paste
- Styling is Tailwind utility classes on semantic tokens (
bg-card,text-muted-foreground) — it inherits your theme instead of overriding it. - Install: npm i lucide-react
- Every prop has a default, so it renders standalone before you wire it up.
Where it goes
Drop it at components/permission-scope-dialog.tsx and import it where you need the section:
import { PermissionScopeDialog } from '@/components/permission-scope-dialog'Customize
2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.
Props
Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.
| Prop | Type | Default |
|---|---|---|
agentName | string | 'Retention agent' |
purpose | string | 'It needs to see who is at risk, and — if you… |
scopes | PermissionScope[] | DEFAULT_SCOPES |
durations | string[] | DEFAULT_DURATIONS |
className | string | '' |
Not using React?
The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.
This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.
permission-scope-dialog.html
<!--
Agent Permission Scopes — markup from the Hoverlab catalog.
This is the block rendered once to HTML and wrapped as a component
file. It is not a port of the React source: the Tailwind classes carry
the design, which is the part that took the work, and they are the same
in every framework.
This block is interactive in React and the handlers are NOT here.
Buttons, toggles and menus render in their initial state and do
nothing until you wire them up.
-->
<div class="flex justify-center p-6 ">
<section aria-labelledby="_R_0_" class="w-full max-w-md overflow-hidden rounded-2xl border border-border/60 bg-card shadow-2xl">
<div class="border-b border-border/60 px-5 py-4 text-center">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-primary/10 text-primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round h-5 w-5" aria-hidden="true">
<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path>
<circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle>
</svg>
</span>
<h3 id="_R_0_" data-stress-ignore="true" class="mt-3 text-base font-semibold">Give Retention agent access</h3>
<p class="mt-1 text-sm leading-relaxed text-muted-foreground">It needs to see who is at risk, and — if you let it — act on that.</p>
</div>
<div class="max-h-[64rem] space-y-5 overflow-y-auto px-5 py-4">
<div>
<h4 class="mb-1 flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye h-3.5 w-3.5" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>Can see</h4>
<ul class="space-y-1">
<li>
<label class="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring ">
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">Read accounts and contacts<span class="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-muted-foreground">Required</span></span>
<span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">Names, plan, seat count, renewal date</span>
</span>
<span class="relative mt-0.5 shrink-0">
<input type="checkbox" role="switch" disabled="" class="peer sr-only" checked="" />
<span aria-hidden="true" class="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"></span>
<span aria-hidden="true" class="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"></span>
</span>
</label>
</li>
<li>
<label class="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring cursor-pointer hover:bg-muted/50">
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">Read product usage events</span>
<span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">Last 90 days, aggregated per account</span>
</span>
<span class="relative mt-0.5 shrink-0">
<input type="checkbox" role="switch" class="peer sr-only" checked="" />
<span aria-hidden="true" class="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"></span>
<span aria-hidden="true" class="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"></span>
</span>
</label>
</li>
<li>
<label class="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring cursor-pointer hover:bg-muted/50">
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">Read support tickets</span>
<span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">Subject and status only — message bodies stay private</span>
</span>
<span class="relative mt-0.5 shrink-0">
<input type="checkbox" role="switch" class="peer sr-only" checked="" />
<span aria-hidden="true" class="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"></span>
<span aria-hidden="true" class="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"></span>
</span>
</label>
</li>
</ul>
</div>
<div>
<h4 class="mb-1 flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil-line h-3.5 w-3.5" aria-hidden="true"><path d="M12 20h9"></path><path d="M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z"></path><path d="m15 5 3 3"></path></svg>Can change</h4>
<p class="mb-2 text-xs text-muted-foreground">Off by default. These act without asking again.</p>
<ul class="space-y-1">
<li>
<label class="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring cursor-pointer hover:bg-muted/50">
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">Write notes on accounts</span>
<span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">Appends to the activity log; nothing is overwritten</span>
</span>
<span class="relative mt-0.5 shrink-0">
<input type="checkbox" role="switch" class="peer sr-only" />
<span aria-hidden="true" class="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"></span>
<span aria-hidden="true" class="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"></span>
</span>
</label>
</li>
<li>
<label class="flex items-start gap-3 rounded-xl px-2.5 py-2 transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring cursor-pointer hover:bg-muted/50">
<span class="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-2 text-sm font-medium">Send email on your behalf</span>
<span class="mt-0.5 block text-xs leading-relaxed text-muted-foreground">From retention@acme.com, to customers, without a second prompt</span>
</span>
<span class="relative mt-0.5 shrink-0">
<input type="checkbox" role="switch" class="peer sr-only" />
<span aria-hidden="true" class="block h-5 w-9 rounded-full border border-transparent bg-muted-foreground/30 transition-colors peer-checked:bg-primary peer-disabled:opacity-50"></span>
<span aria-hidden="true" class="absolute start-0.5 top-0.5 block h-4 w-4 rounded-full border border-transparent bg-background transition-transform peer-checked:translate-x-4 rtl:peer-checked:-translate-x-4"></span>
</span>
</label>
</li>
</ul>
</div>
<fieldset>
<legend class="mb-2 flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock h-3.5 w-3.5" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>Expires after</legend>
<div class="flex gap-2">
<label class="flex flex-1 cursor-pointer items-center justify-center rounded-xl border px-2 py-2 text-xs font-medium transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring border-primary bg-primary/5 text-foreground"><input type="radio" class="sr-only" name="_R_0_-duration" checked="" value="This session" />This session</label>
<label class="flex flex-1 cursor-pointer items-center justify-center rounded-xl border px-2 py-2 text-xs font-medium transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring border-border/60 text-muted-foreground hover:bg-muted/50"><input type="radio" class="sr-only" name="_R_0_-duration" value="7 days" />7 days</label>
<label class="flex flex-1 cursor-pointer items-center justify-center rounded-xl border px-2 py-2 text-xs font-medium transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring border-border/60 text-muted-foreground hover:bg-muted/50"><input type="radio" class="sr-only" name="_R_0_-duration" value="30 days" />30 days</label>
</div>
</fieldset>
</div>
<div class="space-y-2 border-t border-border/60 bg-muted/30 px-5 py-4">
<button type="button" class="w-full rounded-xl bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background">Grant 3 permissions</button>
<button type="button" class="w-full rounded-xl px-4 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Not now</button>
<p class="flex items-center justify-center gap-1.5 pt-1 text-xs text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check h-3.5 w-3.5" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg>Revocable at any time from Settings → Agents</p>
</div>
</section>
</div>
- This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
- It is one frame: the component in its initial state, with no props applied beyond the defaults.
- This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
- Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.
What each framework gets across the whole catalog — effects convert properly; this rung is markup.
For AI
The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
See the prompt
Used in these pages
Want the whole screen instead of this one section? Open a page and copy it entire.
7 more blocks in Human in the Loop
All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.
Browse Human in the LoopShipping one commercially
Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.
- A commercial licence for everything in the catalog
- Unlimited bundle exports, in Vue, Svelte and Tailwind
- One payment — no subscription, nothing to renew
More Human in the Loop blocks
View categoryProposed Edits Diff Table
Machine-proposed row edits accepted one at a time, with before and after in real del/ins elements, a tri-state select-all that actually sets indeterminate, and a running count of what will be written.
Recommendation with Confidence Meter
A suggestion scored with a native meter rather than a styled bar, banded in words as well as numbers, and showing what the model rejected — the fastest way a human catches a bad recommendation.
Bulk Approval Queue
Forty decisions and an honest way to clear them: bulk approve that cannot reach the high-impact rows, a select-all that says how many it takes, and the auto-approve deadline on every line.
Approval Policy List
Which agent actions run unattended and which need a signature, stated as a policy the operator can read before anything happens.
Escalation Queue
What is waiting on a person, ordered by how long it has been waiting rather than when it arrived.
Human Oversight Split
Where a person sits in an automated run, written as four guarantees rather than as a promise that a human is involved.