Tool Permission Prompt
A permission prompt asking to allow Bash to run pnpm install, with Allow once, Always allow and Deny. A focus ring glides from choice to choice while a Tab keycap presses, the way keyboard users move.
Also known as: allow tool permission ui, allow once always allow deny, agent permission dialog.
HTML
<div class="aia-permission-prompt" role="status" aria-label="Claude asks to run pnpm install">
<div class="aia-permission-prompt-head">
<span class="aia-permission-prompt-badge" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 7 4.5 5L5 17M12 17.5h7"/></svg></span>
<span class="aia-permission-prompt-text">
<span class="aia-permission-prompt-q">Allow <b>Bash</b> to run <code>pnpm install</code>?</span>
<span class="aia-permission-prompt-why">Installs 312 packages from pnpm-lock.yaml</span>
</span>
</div>
<div class="aia-permission-prompt-opts">
<span class="aia-permission-prompt-ring" aria-hidden="true"></span>
<button type="button"><kbd>1</kbd><span>Allow once</span></button>
<button type="button"><kbd>2</kbd><span>Always allow <code>pnpm install</code></span></button>
<button type="button"><kbd>3</kbd><span>Deny</span><em>esc</em></button>
</div>
<p class="aia-permission-prompt-foot" aria-hidden="true"><kbd class="aia-permission-prompt-tab">Tab</kbd>to move<kbd>Enter</kbd>to choose</p>
</div>CSS
@property --aia-permission-prompt-t {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.aia-permission-prompt {
--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);
--d: 6.6s;
--t: var(--aia-permission-prompt-t);
width: 21em;
padding: 0.95em 0.95em 0.75em;
animation: aia-permission-prompt-clock var(--d) cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.aia-permission-prompt-head {
display: flex;
align-items: center;
gap: 0.65em;
padding: 0 0.1em;
}
.aia-permission-prompt-badge {
flex: none;
display: grid;
place-items: center;
width: 2em;
height: 2em;
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 14%, transparent);
color: color-mix(in srgb, var(--c) 80%, currentColor);
}
.aia-permission-prompt-badge svg {
width: 1.15em;
height: 1.15em;
stroke-width: 2.4;
}
.aia-permission-prompt-text {
display: grid;
gap: 0.1em;
min-width: 0;
}
.aia-permission-prompt-q {
font-size: 0.92em;
font-weight: 600;
white-space: nowrap;
}
.aia-permission-prompt code {
padding: 0.08em 0.38em;
border-radius: 0.35em;
background: color-mix(in srgb, currentColor 7%, transparent);
font: 500 0.9em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-permission-prompt-why {
color: color-mix(in srgb, currentColor 55%, transparent);
font-size: 0.74em;
}
.aia-permission-prompt-opts {
position: relative;
display: grid;
gap: 0.18em;
margin-top: 0.75em;
}
.aia-permission-prompt-ring {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1.95em;
border-radius: 0.55em;
background: color-mix(in srgb, var(--c) 10%, transparent);
box-shadow: 0 0 0 0.11em var(--c), 0 0 0 0.36em color-mix(in srgb, var(--c) 16%, transparent);
transform: translateY(calc(var(--t) * 2.13em));
}
.aia-permission-prompt-opts button {
--i: 0;
--on: clamp(0, 1 - max(var(--t) - var(--i), var(--i) - var(--t)) * 2.2, 1);
position: relative;
display: flex;
align-items: center;
gap: 0.6em;
height: 1.95em;
padding: 0 0.6em;
border: 0;
border-radius: 0.55em;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.aia-permission-prompt-opts button:nth-of-type(2) { --i: 1; }
.aia-permission-prompt-opts button:nth-of-type(3) { --i: 2; }
.aia-permission-prompt-opts button:focus-visible {
outline: 2px solid var(--c);
outline-offset: 2px;
}
.aia-permission-prompt-opts button > span {
font-size: 0.86em;
font-weight: calc(450 + var(--on) * 150);
opacity: calc(0.62 + var(--on) * 0.38);
white-space: nowrap;
}
.aia-permission-prompt-opts button:nth-of-type(3) > span { color: color-mix(in srgb, #dc2626 calc(var(--on) * 70%), currentColor); }
.aia-permission-prompt-opts kbd {
display: grid;
place-items: center;
width: 1.75em;
height: 1.75em;
border-radius: 0.4em;
background: color-mix(in srgb, var(--c) calc(var(--on) * 100%), transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) calc(var(--on) * 100%), color-mix(in srgb, currentColor 18%, transparent));
color: color-mix(in srgb, #fff calc(var(--on) * 100%), color-mix(in srgb, currentColor 55%, transparent));
font: 600 0.7em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-permission-prompt-opts em {
margin-left: auto;
color: color-mix(in srgb, currentColor 42%, transparent);
font: 500 0.7em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
font-style: normal;
}
.aia-permission-prompt-foot {
display: flex;
align-items: center;
gap: 0.45em;
margin: 0.8em 0 0;
padding: 0 0.15em;
color: color-mix(in srgb, currentColor 50%, transparent);
font-size: 0.72em;
}
.aia-permission-prompt-foot kbd {
padding: 0.12em 0.45em;
border-radius: 0.35em;
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent), inset 0 -0.12em 0 color-mix(in srgb, currentColor 12%, transparent);
color: color-mix(in srgb, currentColor 75%, transparent);
font: 600 0.95em ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.aia-permission-prompt-foot kbd:not(:first-child) { margin-left: 0.6em; }
.aia-permission-prompt-foot .aia-permission-prompt-tab {
animation: aia-permission-prompt-press var(--d) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aia-permission-prompt-clock {
0%, 27% { --aia-permission-prompt-t: 0; }
33%, 60% { --aia-permission-prompt-t: 1; }
66%, 93% { --aia-permission-prompt-t: 2; }
100% { --aia-permission-prompt-t: 0; }
}
@keyframes aia-permission-prompt-press {
0%, 23%, 30%, 56%, 63%, 89%, 96%, 100% { transform: none; background: transparent; color: color-mix(in srgb, currentColor 75%, transparent); }
26.5%, 59.5%, 92.5% { transform: translateY(0.12em); background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.aia-permission-prompt,
.aia-permission-prompt-foot .aia-permission-prompt-tab {
animation: none;
--aia-permission-prompt-t: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.aia-permission-prompt, .aia-permission-prompt *, .aia-permission-prompt::before, .aia-permission-prompt::after, .aia-permission-prompt *::before, .aia-permission-prompt *::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.