Agent Waiting for Approval
A permission card asking to run git push origin feat/rate-limit, with Deny and Allow once buttons. An amber dot breathes, a waiting timer counts the seconds and a soft ring pulses off Allow.
Also known as: ai permission prompt, approve command ui, human in the loop ui.
Waiting for approval
Claude wants to run a command
git push origin feat/rate-limit
HTML
<div class="aia-agent-approval-card" role="status" aria-label="Waiting for your approval">
<div class="aia-agent-approval-card-head">
<span class="aia-agent-approval-card-dot" aria-hidden="true"></span>
<span>Waiting for approval</span>
<span class="aia-agent-approval-card-timer" aria-hidden="true"></span>
</div>
<p class="aia-agent-approval-card-ask">Claude wants to run a command</p>
<code class="aia-agent-approval-card-cmd"><span aria-hidden="true">$</span> git push origin feat/rate-limit</code>
<div class="aia-agent-approval-card-actions">
<button type="button" class="aia-agent-approval-card-deny">Deny</button>
<button type="button" class="aia-agent-approval-card-allow">Allow once</button>
</div>
</div>CSS
@property --aia-agent-approval-card-s {
syntax: "<integer>";
inherits: false;
initial-value: 0;
}
.aia-agent-approval-card {
--c: var(--aia-color, #7c5cff);
font-size: var(--aia-size, 16px);
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.4;
position: relative;
box-sizing: border-box;
padding: 0.9em 1em;
border-radius: 0.9em;
background: color-mix(in srgb, currentColor 3%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3);
--amber: color-mix(in srgb, #d97706 84%, currentColor);
width: 20em;
animation: aia-agent-approval-card-edge 2.6s ease-in-out infinite;
}
.aia-agent-approval-card-head {
display: flex;
align-items: center;
gap: 0.5em;
color: var(--amber);
font-size: 0.8em;
font-weight: 600;
}
.aia-agent-approval-card-dot {
position: relative;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: var(--amber);
}
.aia-agent-approval-card-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--amber);
animation: aia-agent-approval-card-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.aia-agent-approval-card-timer {
margin-left: auto;
color: color-mix(in srgb, currentColor 45%, transparent);
font: 500 1em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
counter-reset: s var(--aia-agent-approval-card-s);
animation: aia-agent-approval-card-tick 60s steps(60, end) infinite;
}
.aia-agent-approval-card-timer::before { content: "0:" counter(s, decimal-leading-zero); }
.aia-agent-approval-card-ask {
margin: 0.55em 0 0.45em;
font-size: 0.95em;
font-weight: 600;
}
.aia-agent-approval-card-cmd {
display: block;
padding: 0.55em 0.7em;
border-radius: 0.5em;
background: color-mix(in srgb, currentColor 6%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
font: 0.8em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
white-space: nowrap;
}
.aia-agent-approval-card-cmd span { color: color-mix(in srgb, currentColor 40%, transparent); }
.aia-agent-approval-card-actions {
display: flex;
justify-content: flex-end;
gap: 0.5em;
margin-top: 0.8em;
}
.aia-agent-approval-card-actions button {
position: relative;
padding: 0.5em 0.95em;
border: 0;
border-radius: 0.55em;
font: 600 0.82em system-ui, sans-serif;
cursor: pointer;
}
.aia-agent-approval-card-actions button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.aia-agent-approval-card-deny {
background: transparent;
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
color: inherit;
}
.aia-agent-approval-card-allow {
background: var(--c);
color: #fff;
box-shadow: 0 0.3em 0.8em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
}
.aia-agent-approval-card-allow::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
animation: aia-agent-approval-card-pulse 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
@keyframes aia-agent-approval-card-edge {
0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 11%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3); }
50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #d97706 40%, transparent), 0 0.1em 0.2em color-mix(in srgb, currentColor 4%, transparent), 0 0.9em 2em -1.1em rgb(0 0 0 / 0.3); }
}
@keyframes aia-agent-approval-card-ping {
0% { opacity: 0.6; transform: scale(1); }
60%, 100% { opacity: 0; transform: scale(2.8); }
}
@keyframes aia-agent-approval-card-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 50%, transparent); }
70%, 100% { box-shadow: 0 0 0 0.55em color-mix(in srgb, var(--c) 0%, transparent); }
}
@keyframes aia-agent-approval-card-tick {
from { --aia-agent-approval-card-s: 0; }
to { --aia-agent-approval-card-s: 60; }
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-approval-card,
.aia-agent-approval-card-dot::after,
.aia-agent-approval-card-allow::after {
animation: none;
}
}
@media (prefers-reduced-motion: reduce) {
.aia-agent-approval-card, .aia-agent-approval-card *, .aia-agent-approval-card::before, .aia-agent-approval-card::after, .aia-agent-approval-card *::before, .aia-agent-approval-card *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--aia-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--aia-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.