Function AddPolicyForm

packages/react/src/pages/policies.tsx:100–191

(props: {
  onSubmit: (input: { owner: Owner; pattern: string; action: ToolPolicyAction }) => void;
  owner: Owner;
  onOwnerChange: (owner: Owner) => void;
  busy: boolean;
})

// ---------------------------------------------------------------------------

function AddPolicyForm(props: {
  onSubmit: (input: { owner: Owner; pattern: string; action: ToolPolicyAction }) => void;
  owner: Owner;
  onOwnerChange: (owner: Owner) => void;
  busy: boolean;
}) {
  const [pattern, setPattern] = useState("");
  const [action, setAction] = useState<ToolPolicyAction>("require_approval");
  const valid = isValidPattern(pattern);
  // Non-org hosts (local/desktop) have one local workspace. New local policies
  // are org-owned internally to match the v1->v2 migration.
  const ownerDisplay = useOwnerDisplay();
  const ownerChoices = ownerDisplay.isSinglePlayerHost
    ? POLICY_OWNERS.filter((option) => option.owner === "org").map((option) => ({
        ...option,
        label: "Local",
      }))
    : POLICY_OWNERS;

  return (
    <form
      className="flex flex-col gap-3 rounded-xl border border-border bg-card px-5 py-4"
      onSubmit={(e) => {
        e.preventDefault();
        if (!valid) return;
        props.onSubmit({ owner: props.owner, pattern, action });
        setPattern("");
        setAction("require_approval");
      }}
    >
      <div className="flex flex-col gap-1">
        <Label htmlFor="policy-pattern" className="text-xs font-medium text-foreground/80">
          Pattern
        </Label>
        <Input
          id="policy-pattern"
          placeholder="vercel.dns.* or *"
          value={pattern}
          onChange={(e) => setPattern(e.target.value)}
          className="font-mono text-sm"
        />
        <p className="text-xs text-muted-foreground">
          Exact tool id, trailing wildcard, or <code className="font-mono">*</code> for every tool.
          Examples: <code className="font-mono">*</code>,{" "}
          <code className="font-mono">vercel.*</code>,{" "}
          <code className="font-mono">vercel.dns.*</code>,{" "}
          <code className="font-mono">vercel.dns.create</code>.
        </p>
      </div>
      <div className="flex flex-col gap-1">
        <Label className="text-xs font-medium text-foreground/80">Action</Label>
        <Select value={action} onValueChange={(v) => setAction(v as ToolPolicyAction)}>
          <SelectTrigger className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            {POLICY_ACTIONS_IN_ORDER.map((a) => (
              <SelectItem key={a} value={a}>