AI agent components

Tool-call traces, approval gates, context panels and inline actions.

An agent interface has a problem a chatbox does not: the model is about to do something, and a person needs to see what, and sometimes say no. These are the surfaces that make that legible — the tool-call trace, the diff-and-approve gate, the retrieved-context panel that shows what was actually read, and the inline "rewrite this" actions that live inside an editor rather than in a sidebar.

23 matching23 blocksFree to copy
Open the full page for this block

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.

Human in the Loop247 lines1 dep
Open the full page for this block

Proposed 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.

Human in the Loop269 lines1 dep
Open the full page for this block

Retrieved Context Chunks

The RAG debugging surface: ranked passages with similarity as a meter, matched spans in real mark elements, and filter chips wired as a radiogroup so arrows move between them.

Retrieval & Context327 lines1 dep
Open the full page for this block

Context Window Budget

What is in the context and what fell out of it — a stacked budget with the reply reserve drawn as a segment, and the dropped chunks named with the reason, which is the part nobody ships.

Retrieval & Context309 lines1 dep
Open the full page for this block

Selection Action Toolbar

Highlight a passage and hand it to the model. Positioned from the range rect relative to its container, raised by selectionchange so Shift-Arrow works, and every button prevents the mousedown that would collapse the selection.

Inline AI Actions251 lines1 dep
Open the full page for this block

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.

Human in the Loop258 lines1 dep
Open the full page for this block

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.

Human in the Loop297 lines1 dep
Open the full page for this block

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.

Human in the Loop307 lines1 dep
Open the full page for this block

Approval Policy List

Which agent actions run unattended and which need a signature, stated as a policy the operator can read before anything happens.

Human in the Loop156 linesNo deps
Open the full page for this block

Escalation Queue

What is waiting on a person, ordered by how long it has been waiting rather than when it arrived.

Human in the Loop148 linesNo deps
Open the full page for this block

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.

Human in the Loop156 linesNo deps
Open the full page for this block

Answer Source Citations

The published footnotes under an answer — ordered list, real cite and time elements, the claim each source supports, and a staleness warning written in words rather than shown as an amber dot.

Retrieval & Context231 lines1 dep
Open the full page for this block

Knowledge Source Picker

Choosing what the assistant may read, with indexing state told honestly — a half-indexed source says so rather than showing a green tick — and the footer stating the effect of the selection, not its cardinality.

Retrieval & Context345 lines1 dep
Open the full page for this block

Nothing Found, Answered Honestly

The refusal screen: says plainly that nothing was found, shows where it looked and the near-misses below threshold, and offers the two real ways out instead of inventing an answer.

Retrieval & Context180 lines1 dep
Open the full page for this block

Index Freshness Panel

A green tick means the connector works, not that the answers are current. Freshness as an age in words per source, the headline taken from the stalest one, and a failed sync that still says what age it is answering from.

Retrieval & Context246 lines1 dep
Open the full page for this block

Retrieval Freshness List

Retrieved sources ranked by how stale they are, because a confident answer from a two-year-old document is the failure people do not catch.

Retrieval & Context151 linesNo deps
Open the full page for this block

Context Scope List

Which sources this answer may draw on, shown as a scope the user can read before asking rather than a citation list after.

Retrieval & Context152 linesNo deps
Open the full page for this block

Grounding Split

How an answer is tied to its sources, and what the system does when it cannot find any.

Retrieval & Context156 linesNo deps
Open the full page for this block

Ghost Text Completion

Copilot-style completion in a plain textarea: a transparent-caret field over a metric-matched mirror, Tab to accept, Escape that actually sticks, and the suggestion announced rather than left as invisible grey text.

Inline AI Actions206 lines1 dep
Open the full page for this block

Agent-Adjusted Inspector

The model edits real properties and every change is attributed and reversible — per-property provenance in words, per-property revert, and sliders whose aria-valuetext carries the unit.

Inline AI Actions381 lines1 dep
Open the full page for this block

Unprompted Insight Cards

Findings the agent surfaced on its own, paged one at a time, each stating its magnitude rather than its direction, dismissible, and carrying a sparkline that is also a sentence for anyone who cannot see it.

Inline AI Actions284 lines1 dep
Open the full page for this block

Editor Slash Menu

The "/" menu inside a document: focus never leaves the editor, every row names what it acts on, and Escape cleans up the trigger text it inserted instead of leaving you to backspace it.

Inline AI Actions343 lines1 dep
Open the full page for this block

Inline AI Action Menu

The actions offered on a selection, each saying whether it rewrites in place or opens a draft beside it.

Inline AI Actions151 linesNo deps

Questions about ai agent components

What does a human-in-the-loop gate need to show?
The exact action, its arguments, and what changes if it runs — a diff where there is one. "Allow the agent to continue?" with no payload is a consent dialog with the consent removed.
How should retrieved sources be displayed?
Next to the claim they support, linked, with enough of the snippet to judge relevance. Citations collected at the bottom get read by nobody and verified by no one.
Are these ai agent components free to use?
All 23 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?
Install it with the CLI: `npx hoverlab add approval-request-card` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.