pro162 lines · framer-motion

Policy Prompt

Grant exactly what the task needs. A permission dialog that lists what the agent wants to read, write, run or reach, lets the user untick items, and asks for how long.

Use it for: Coding agents, file and shell access, OAuth-style scopes for tools.
Themes: Light + dark
License: Commercial use (draft)

Live

tsx

"use client";

import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

export type PermissionScope = "once" | "session" | "always";

export interface Permission {
  id: string;
  kind: "read" | "write" | "exec" | "network" | "secrets";
  target: string;
  reason?: string;
}

export interface PolicyPromptProps {
  agent?: string;
  permissions?: Permission[];
  defaultScope?: PermissionScope;
  /** Hide "always" for sensitive policies. */
  allowAlways?: boolean;
  onResolve?: (r: { granted: string[]; scope: PermissionScope } | { denied: true }) => void;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Black header strip 'PERMISSION REQUEST' with a policy version.
→Each permission row: checkbox, kind tag (Read / Write / Run / Net / Secret, each colour-coded), target in monospace and a short reason.
→Scope picker: Once / This session / Always (Always can be hidden with allowAlways={false}).
→Allow button reads 'Allow all' or 'Allow N selected'; Deny all is always available. Result screen summarises the grant.

Accessibility

✓role=alertdialog with label and description.
✓Native checkboxes and radios, so keyboard and screen readers work as expected.
✓Honours prefers-reduced-motion.