51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T733,.cr-approval { display: grid; gap: var(--cr-space-3); padding: var(--cr-space-6); border-radius: var(--cr-radius-xl); color: var(--cr-color-text-default); font-family: var(--cr-font-family-sans); font-size: var(--cr-font-size-md); } .cr-approval[data-risk='high'] { box-shadow: var(--cr-shadow-sheet), inset 0 0 0 1.5px var(--cr-color-danger-text); } .cr-approval[data-resolved] { box-shadow: var(--cr-shadow-card); } .cr-approval:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } .cr-approval__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cr-space-2); } .cr-approval__title { margin: 0; font-family: var(--cr-font-family-display); font-size: 28px; font-weight: var(--cr-font-weight-bold); letter-spacing: var(--cr-font-tracking-title); line-height: 1.2; } .cr-approval__title .cr-code { padding: 0; background: none; color: var(--cr-color-text-default); font-size: 0.86em; font-weight: var(--cr-font-weight-semibold); letter-spacing: 0; } .cr-approval__reason { margin: 0; max-width: 64ch; color: var(--cr-color-text-secondary); line-height: var(--cr-font-line-height-normal); } .cr-approval__actions { display: flex; flex-wrap: wrap; gap: var(--cr-space-2); margin-top: var(--cr-space-1); } /* Hints inside buttons inherit the button colour so they stay readable on filled variants. */ .cr-approval__actions .cr-kbd-hint { color: inherit; } .cr-approval__actions .cr-kbd { border-color: color-mix(in srgb, currentColor 40%, transparent); } .cr-approval__outcome { margin: 0; } .cr-approval__outcome:focus-visible { outline: var(--cr-focus-width) solid var(--cr-color-focus); outline-offset: var(--cr-focus-offset); } 54:T1806,'use client'; import { useEffect, useId, useRef, type KeyboardEvent } from 'react'; import { Badge } from '@/components/creance/badge/Badge'; import { Button } from '@/components/creance/button/Button'; import { Code } from '@/components/creance/code/Code'; import { KeyboardHint } from '@/components/creance/keyboard-hint/KeyboardHint'; import { RiskLabel, type Risk } from '@/components/creance/risk-label/RiskLabel'; import { cx } from '@/lib/creance/cx'; import { deprecate } from '@/lib/creance/deprecate'; import { LiveRegion } from '@/lib/creance/LiveRegion'; import './ApprovalPrompt.css'; export type ApprovalDecision = 'allow-once' | 'always-allow' | 'deny'; export interface ApprovalPromptProps { /** The exact command or operation, e.g. "npm install zod@3". */ action: string; /** What it acts on, e.g. a file, repo or environment. */ target?: string | undefined; risk: Risk; /** Why the agent wants to do this, in the agent's words. */ reason: string; agentName?: string | undefined; /** Called with the scope the person allowed: just this once, or always. */ onAllow?: (scope: 'once' | 'always') => void; /** * @deprecated Renamed to `onAllow` in 0.2.0, to match the "Allow" buttons. Still works, with a * development warning; removed in 1.0. Run `npx creance-codemod-on-allow src` to migrate. */ onApprove?: (scope: 'once' | 'always') => void; onDeny?: () => void; /** Once set, the prompt shows the outcome instead of the buttons. */ decision?: ApprovalDecision | undefined; /** Offer "Always allow". Defaults to false for high risk: a dangerous action should be confirmed every time. */ allowAlways?: boolean; /** Move focus to the prompt when it appears. Default true; turn off when several prompts render at once. */ autoFocus?: boolean; /** A, Shift+A and D while focus is inside the prompt. Default true. */ shortcuts?: boolean; headingLevel?: 2 | 3 | 4; className?: string; } const outcome: Record = { 'allow-once': { text: 'Allowed once', status: 'done' }, 'always-allow': { text: 'Always allowed', status: 'done' }, deny: { text: 'Denied', status: 'failed' }, }; export function ApprovalPrompt({ action, target, risk, reason, agentName = 'The agent', onAllow, onApprove, onDeny, decision, allowAlways = risk !== 'high', autoFocus = true, shortcuts = true, headingLevel = 3, className, }: ApprovalPromptProps) { const titleId = useId(); const reasonId = useId(); const rootRef = useRef(null); const outcomeRef = useRef(null); const Heading = `h${headingLevel}` as const; const usesOnApprove = onApprove !== undefined; useEffect(() => { if (usesOnApprove) { deprecate( 'ApprovalPrompt.onApprove', 'ApprovalPrompt: `onApprove` is deprecated and will be removed in 1.0. Rename it to `onAllow`. See docs/MIGRATIONS.md.', ); } }, [usesOnApprove]); const allow = onAllow ?? onApprove; useEffect(() => { if (autoFocus && !decision) rootRef.current?.focus(); // Only on mount: re-focusing on every render would steal focus from the buttons. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // After a decision the buttons disappear; keep focus in the prompt instead of dropping it to . useEffect(() => { const active = document.activeElement; if (decision && (active === document.body || rootRef.current?.contains(active))) outcomeRef.current?.focus(); }, [decision]); function onKeyDown(e: KeyboardEvent) { if (!shortcuts || decision || e.metaKey || e.ctrlKey || e.altKey) return; if ((e.target as HTMLElement).closest('input, textarea, select, [contenteditable="true"]')) return; const key = e.key.toLowerCase(); if (key === 'a' && e.shiftKey && allowAlways) allow?.('always'); else if (key === 'a' && !e.shiftKey) allow?.('once'); else if (key === 'd' && !e.shiftKey) onDeny?.(); else return; e.preventDefault(); } const announcement = decision ? `${outcome[decision].text}: ${action}` : `Approval needed. ${agentName} wants to run ${action}. ${risk} risk.`; return ( // A labelled group, not a modal: the person can still read the run before deciding. // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions

{agentName} wants to run {action} {target && ( <> {' '} on {target} )}

{reason}

{decision ? (

{outcome[decision].text}

) : (

{allowAlways && ( )}

)}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@creance","registryDependencies":["https://creance.pages.dev/r/badge.json","https://creance.pages.dev/r/button.json","https://creance.pages.dev/r/code.json","https://creance.pages.dev/r/creance-base.json","https://creance.pages.dev/r/keyboard-hint.json","https://creance.pages.dev/r/risk-label.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"approval-prompt/ApprovalPrompt.css","content":"$53","type":"registry:file","target":"@components/creance/approval-prompt/ApprovalPrompt.css"},{"path":"approval-prompt/ApprovalPrompt.tsx","content":"$54","type":"registry:ui","target":"@components/creance/approval-prompt/ApprovalPrompt.tsx"}],"className":"h-[70svh] min-h-80"}]]}]